Bug 1270994 - Fix ESLint errors in devtools/client/shared/*.js; r=jryans
authorTom Tromey <tom@tromey.com>
Thu, 19 May 2016 08:35:45 -0600
changeset 337227 6ac30d36c92309de1e179a1dd230c04e14a97f7f
parent 337226 10a29aed7ab09d1f6e08a791c9ea42560d669cc5
child 337228 595726ab8d29b96055cca3f0d0b079b98f87253e
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjryans
bugs1270994
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1270994 - Fix ESLint errors in devtools/client/shared/*.js; r=jryans MozReview-Commit-ID: 1od43gBnUq1
.eslintignore
devtools/client/shared/browser-loader.js
devtools/client/shared/devices.js
devtools/client/shared/devtools-file-watcher.js
devtools/client/shared/doorhanger.js
devtools/client/shared/file-watcher-worker.js
devtools/client/shared/file-watcher.js
devtools/client/shared/frame-script-utils.js
devtools/client/shared/getjson.js
devtools/client/shared/inplace-editor.js
devtools/client/shared/key-shortcuts.js
devtools/client/shared/l10n.js
devtools/client/shared/node-attribute-parser.js
devtools/client/shared/options-view.js
devtools/client/shared/output-parser.js
devtools/client/shared/poller.js
devtools/client/shared/prefs.js
devtools/client/shared/source-utils.js
devtools/client/shared/telemetry.js
devtools/client/shared/theme-switching.js
devtools/client/shared/theme.js
devtools/client/shared/undo.js
devtools/client/shared/view-source.js
devtools/client/shared/webgl-utils.js
devtools/client/shared/widgets/BarGraphWidget.js
devtools/client/shared/widgets/CubicBezierWidget.js
devtools/client/shared/widgets/FastListWidget.js
devtools/client/shared/widgets/FilterWidget.js
devtools/client/shared/widgets/FlameGraph.js
devtools/client/shared/widgets/Graphs.js
devtools/client/shared/widgets/GraphsWorker.js
devtools/client/shared/widgets/LineGraphWidget.js
devtools/client/shared/widgets/MdnDocsWidget.js
devtools/client/shared/widgets/MountainGraphWidget.js
devtools/client/shared/widgets/Spectrum.js
devtools/client/shared/widgets/TableWidget.js
devtools/client/shared/widgets/Tooltip.js
devtools/client/shared/widgets/view-helpers.js
--- a/.eslintignore
+++ b/.eslintignore
@@ -94,26 +94,22 @@ devtools/client/memory/**
 devtools/client/netmonitor/test/**
 devtools/client/netmonitor/har/test/**
 devtools/client/performance/**
 devtools/client/projecteditor/**
 devtools/client/promisedebugger/**
 devtools/client/responsivedesign/**
 devtools/client/scratchpad/**
 devtools/client/shadereditor/**
-devtools/client/shared/*.js
 devtools/client/shared/*.jsm
-!devtools/client/shared/css-angle.js
-!devtools/client/shared/css-color.js
-!devtools/client/shared/css-color-db.js
-!devtools/client/shared/css-parsing-utils.js
+devtools/client/shared/developer-toolbar.js
 devtools/client/shared/components/test/**
 devtools/client/shared/redux/middleware/test/**
 devtools/client/shared/test/**
-devtools/client/shared/widgets/**
+devtools/client/shared/widgets/*.jsm
 devtools/client/sourceeditor/**
 devtools/client/webaudioeditor/**
 devtools/client/webconsole/**
 !devtools/client/webconsole/panel.js
 !devtools/client/webconsole/jsterm.js
 devtools/client/webide/**
 devtools/server/**
 !devtools/server/actors/webbrowser.js
--- a/devtools/client/shared/browser-loader.js
+++ b/devtools/client/shared/browser-loader.js
@@ -142,18 +142,17 @@ function BrowserLoaderBuilder({ baseURI,
         const { createProxy, getForceUpdate } =
               require("devtools/client/shared/vendor/react-proxy");
         const React = require("devtools/client/shared/vendor/react");
 
         if (!componentProxies.get(uri)) {
           const proxy = createProxy(exports);
           componentProxies.set(uri, proxy);
           module.exports = proxy.get();
-        }
-        else {
+        } else {
           const proxy = componentProxies.get(uri);
           const instances = proxy.update(exports);
           instances.forEach(getForceUpdate(React));
           module.exports = proxy.get();
         }
       }
       return exports;
     };
--- a/devtools/client/shared/devices.js
+++ b/devtools/client/shared/devices.js
@@ -1,15 +1,14 @@
 /* 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 { Ci, Cc } = require("chrome");
 const { getJSON } = require("devtools/client/shared/getjson");
 const Services = require("Services");
 const promise = require("promise");
 
 const DEVICES_URL = "devtools.devices.url";
 const Strings = Services.strings.createBundle("chrome://devtools/locale/device.properties");
 
 /* This is a catalog of common web-enabled devices and their properties,
--- a/devtools/client/shared/devtools-file-watcher.js
+++ b/devtools/client/shared/devtools-file-watcher.js
@@ -23,19 +23,18 @@ function findSourceDir(path) {
     return Promise.resolve(null);
   }
 
   return OS.File.exists(
     OS.Path.join(path, "devtools/client/shared/file-watcher.js")
   ).then(exists => {
     if (exists) {
       return path;
-    } else {
-      return findSourceDir(OS.Path.dirname(path));
     }
+    return findSourceDir(OS.Path.dirname(path));
   });
 }
 
 let worker = null;
 const onPrefChange = function () {
   // We need to figure out a src dir to watch. These are the actual
   // files the user is working with, not the files in the obj dir. We
   // do this by walking up the filesystem and looking for the devtools
@@ -51,27 +50,29 @@ const onPrefChange = function () {
   // obj dir, and we search for `devtools/client`, so go up 2 levels
   // to skip that devtools dir and start searching for the src dir.
   if (Services.prefs.getBoolPref(HOTRELOAD_PREF) && !worker) {
     const devtoolsPath = resolveResourcePath("resource://devtools")
       .replace(/\/$/, "");
     const searchPoint = OS.Path.dirname(OS.Path.dirname(devtoolsPath));
     findSourceDir(searchPoint)
       .then(srcPath => {
-        const rootPath = srcPath ? OS.Path.join(srcPath, "devtools") : devtoolsPath;
+        const rootPath = srcPath ? OS.Path.join(srcPath, "devtools")
+                                 : devtoolsPath;
         const watchPath = OS.Path.join(rootPath, "client");
         const { watchFiles } = require("devtools/client/shared/file-watcher");
         worker = watchFiles(watchPath, path => {
           let relativePath = path.replace(rootPath + "/", "");
           module.exports.emit("file-changed", relativePath, path);
         });
       });
   } else if (worker) {
     worker.terminate();
     worker = null;
   }
 };
+
 Services.prefs.addObserver(HOTRELOAD_PREF, {
   observe: onPrefChange
 }, false);
 onPrefChange();
 
 EventEmitter.decorate(module.exports);
--- a/devtools/client/shared/doorhanger.js
+++ b/devtools/client/shared/doorhanger.js
@@ -32,17 +32,19 @@ function shouldDevEditionPromoShow() {
 }
 
 var TYPES = {
   // The Developer Edition promo doorhanger, called by
   // opening the toolbox, browser console, WebIDE, or responsive design mode
   // in Beta releases. Only displayed once per profile.
   deveditionpromo: {
     predicate: shouldDevEditionPromoShow,
-    success: () => Services.prefs.setBoolPref(DEV_EDITION_PROMO_SHOWN_PREF, true),
+    success: () => {
+      return Services.prefs.setBoolPref(DEV_EDITION_PROMO_SHOWN_PREF, true);
+    },
     action: () => {
       let url = Services.prefs.getCharPref(DEV_EDITION_PROMO_URL_PREF);
       getGBrowser().selectedTab = getGBrowser().addTab(url);
     },
     url: DEV_EDITION_PROMO_URL
   }
 };
 
@@ -58,20 +60,21 @@ var panelAttrs = {
 /**
  * Helper to call a doorhanger, defined in `TYPES`, with defined conditions,
  * success handlers and loads its own XUL in a frame. Takes an object with
  * several properties:
  *
  * @param {XULWindow} window
  *        The window that should house the doorhanger.
  * @param {String} type
- *        The type of doorhanger to be displayed is, using the `TYPES` definition.
+ *        The type of doorhanger to be displayed is, using the `TYPES`
+ *        definition.
  * @param {String} selector
- *        The selector that the doorhanger should be appended to within `window`.
- *        Defaults to a XUL Document's `window` element.
+ *        The selector that the doorhanger should be appended to within
+ *        `window`.  Defaults to a XUL Document's `window` element.
  */
 exports.showDoorhanger = Task.async(function* ({ window, type, anchor }) {
   let { predicate, success, url, action } = TYPES[type];
   // Abort if predicate fails
   if (!predicate()) {
     return;
   }
 
@@ -113,17 +116,19 @@ exports.showDoorhanger = Task.async(func
         action();
       }
       close();
     });
   }
 });
 
 function setDoorhangerStyle(panel, frame) {
-  Object.keys(panelAttrs).forEach(prop => panel.setAttribute(prop, panelAttrs[prop]));
+  Object.keys(panelAttrs).forEach(prop => {
+    return panel.setAttribute(prop, panelAttrs[prop]);
+  });
   panel.style.margin = "20px";
   panel.style.borderRadius = "5px";
   panel.style.border = "none";
   panel.style.MozAppearance = "none";
   panel.style.backgroundColor = "transparent";
 
   frame.style.borderRadius = "5px";
   frame.setAttribute("flex", "1");
--- a/devtools/client/shared/file-watcher-worker.js
+++ b/devtools/client/shared/file-watcher-worker.js
@@ -74,9 +74,8 @@ onmessage = function (event) {
   // Every second, scan for file changes by stat-ing each of them and
   // comparing modification time.
   setInterval(() => {
     scanFiles(files, changedFile => {
       postMessage({ path: changedFile });
     });
   }, 1000);
 };
-
--- a/devtools/client/shared/file-watcher.js
+++ b/devtools/client/shared/file-watcher.js
@@ -1,28 +1,27 @@
 /* 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 { Ci, ChromeWorker } = require("chrome");
-const Services = require("Services");
+const { ChromeWorker } = require("chrome");
 
 function watchFiles(path, onFileChanged) {
   const watchWorker = new ChromeWorker(
     "resource://devtools/client/shared/file-watcher-worker.js"
   );
 
   watchWorker.onmessage = event => {
     // We need to turn a local path back into a resource URI (or
     // chrome). This means that this system will only work when built
     // files are symlinked, so that these URIs actually read from
     // local sources. There might be a better way to do this.
-    const { path } = event.data;
-    onFileChanged(path);
+    const { newPath } = event.data;
+    onFileChanged(newPath);
   };
 
   watchWorker.postMessage({
     path,
     fileRegex: /\.(js|css|svg|png)$/
   });
   return watchWorker;
 }
--- a/devtools/client/shared/frame-script-utils.js
+++ b/devtools/client/shared/frame-script-utils.js
@@ -1,12 +1,14 @@
 /* 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-env browser */
+/* global addMessageListener, sendAsyncMessage, content */
 "use strict";
 var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
 const {require, loader} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 const promise = require("promise");
 const { Task } = require("devtools/shared/task");
 
 loader.lazyGetter(this, "nsIProfilerModule", () => {
   return Cc["@mozilla.org/tools/profiler;1"].getService(Ci.nsIProfiler);
@@ -20,17 +22,18 @@ addMessageListener("devtools:test:naviga
   content.location = data.location;
 });
 
 addMessageListener("devtools:test:reload", function ({ data }) {
   data = data || {};
   content.location.reload(data.forceget);
 });
 
-addMessageListener("devtools:test:console", function ({ data: { method, args, id } }) {
+addMessageListener("devtools:test:console", function ({ data }) {
+  let { method, args, id } = data;
   content.console[method].apply(content.console, args);
   sendAsyncMessage("devtools:test:console:response", { id });
 });
 
 /**
  * Performs a single XMLHttpRequest and returns a promise that resolves once
  * the request has loaded.
  *
@@ -74,18 +77,19 @@ function promiseXHR(data) {
   }
 
   xhr.send(body);
   return deferred.promise;
 }
 
 /**
  * Performs XMLHttpRequest request(s) in the context of the page. The data
- * parameter can be either a single object or an array of objects described below.
- * The requests will be performed one at a time in the order they appear in the data.
+ * parameter can be either a single object or an array of objects described
+ * below. The requests will be performed one at a time in the order they appear
+ * in the data.
  *
  * The objects should have following form (any of them can be omitted; defaults
  * shown below):
  * {
  *   method: "GET",
  *   url: content.location.href,
  *   body: "",
  *   nocache: true, // Adds a cache busting random token to the URL,
@@ -110,25 +114,25 @@ addMessageListener("devtools:test:xhr", 
   for (let request of requests) {
     let response = yield promiseXHR(request);
     responses.push(response);
   }
 
   sendAsyncMessage("devtools:test:xhr", responses);
 }));
 
-addMessageListener("devtools:test:profiler", function ({ data: { method, args, id }}) {
+addMessageListener("devtools:test:profiler", function ({ data }) {
+  let { method, args, id } = data;
   let result = nsIProfilerModule[method](...args);
   sendAsyncMessage("devtools:test:profiler:response", {
     data: result,
     id: id
   });
 });
 
-
 // To eval in content, look at `evalInDebuggee` in the shared-head.js.
 addMessageListener("devtools:test:eval", function ({ data }) {
   sendAsyncMessage("devtools:test:eval:response", {
     value: content.eval(data.script),
     id: data.id
   });
 });
 
@@ -185,19 +189,18 @@ addMessageListener("devtools:test:setAtt
  * Any selector coming before the || separator *MUST* match a frame node.
  * @param {String} superSelector.
  * @return {DOMNode} The node, or null if not found.
  */
 function superQuerySelector(superSelector, root = content.document) {
   let frameIndex = superSelector.indexOf("||");
   if (frameIndex === -1) {
     return root.querySelector(superSelector);
-  } else {
-    let rootSelector = superSelector.substring(0, frameIndex).trim();
-    let childSelector = superSelector.substring(frameIndex + 2).trim();
-    root = root.querySelector(rootSelector);
-    if (!root || !root.contentWindow) {
-      return null;
-    }
+  }
+  let rootSelector = superSelector.substring(0, frameIndex).trim();
+  let childSelector = superSelector.substring(frameIndex + 2).trim();
+  root = root.querySelector(rootSelector);
+  if (!root || !root.contentWindow) {
+    return null;
+  }
 
-    return superQuerySelector(childSelector, root.contentWindow.document);
-  }
+  return superQuerySelector(childSelector, root.contentWindow.document);
 }
--- a/devtools/client/shared/getjson.js
+++ b/devtools/client/shared/getjson.js
@@ -1,40 +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/. */
 
-const {Cu, CC} = require("chrome");
+"use strict";
+
+const {CC} = require("chrome");
 const promise = require("promise");
 const Services = require("Services");
 
 const XMLHttpRequest = CC("@mozilla.org/xmlextras/xmlhttprequest;1");
 
 // Downloads and caches a JSON file from a URL given by the pref.
 exports.getJSON = function (prefName, bypassCache) {
   if (!bypassCache) {
     try {
       let str = Services.prefs.getCharPref(prefName + "_cache");
       let json = JSON.parse(str);
       return promise.resolve(json);
-    } catch (e) {/* no pref or invalid json. Let's continue */}
+    } catch (e) {
+      // no pref or invalid json. Let's continue
+    }
   }
 
   let deferred = promise.defer();
   let xhr = new XMLHttpRequest();
 
   xhr.onload = () => {
     let json;
     try {
       json = JSON.parse(xhr.responseText);
     } catch (e) {
       return deferred.reject("Invalid JSON");
     }
     Services.prefs.setCharPref(prefName + "_cache", xhr.responseText);
-    deferred.resolve(json);
+    return deferred.resolve(json);
   };
 
   xhr.onerror = (e) => {
     deferred.reject("Network error");
   };
 
   xhr.open("get", Services.prefs.getCharPref(prefName));
   xhr.send();
--- a/devtools/client/shared/inplace-editor.js
+++ b/devtools/client/shared/inplace-editor.js
@@ -38,17 +38,17 @@ const AUTOCOMPLETE_POPUP_CLASSNAME = "in
 // The limit of 500 autocomplete suggestions should not be reached but is kept
 // for safety.
 const MAX_POPUP_ENTRIES = 500;
 
 const FOCUS_FORWARD = Ci.nsIFocusManager.MOVEFOCUS_FORWARD;
 const FOCUS_BACKWARD = Ci.nsIFocusManager.MOVEFOCUS_BACKWARD;
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource://devtools/shared/event-emitter.js");
+const EventEmitter = require("devtools/shared/event-emitter");
 const { findMostRelevantCssPropertyIndex } = require("./suggestion-picker");
 
 /**
  * Helper to check if the provided key matches one of the expected keys.
  * Keys will be prefixed with DOM_VK_ and should match a key in nsIDOMKeyEvent.
  *
  * @param {String} key
  *        the key to check (can be a keyCode).
@@ -623,17 +623,19 @@ InplaceEditor.prototype = {
    * @param {String} value
    *        Property value.
    * @param {Number} offset
    *        Starting index of value.
    * @return {Object} object with properties 'value', 'start', 'end', and
    *         'type'.
    */
   _parseCSSValue: function (value, offset) {
+    /* eslint-disable max-len */
     const reSplitCSS = /(url\("?[^"\)]+"?\)?)|(rgba?\([^)]*\)?)|(hsla?\([^)]*\)?)|(#[\dA-Fa-f]+)|(-?\d*\.?\d+(%|[a-z]{1,4})?)|"([^"]*)"?|'([^']*)'?|([^,\s\/!\(\)]+)|(!(.*)?)/;
+    /* eslint-enable */
     let start = 0;
     let m;
 
     // retreive values from left to right until we find the one at our offset
     while ((m = reSplitCSS.exec(value)) &&
           (m.index + m[0].length < offset)) {
       value = value.substr(m.index + m[0].length);
       start += m.index + m[0].length;
--- a/devtools/client/shared/key-shortcuts.js
+++ b/devtools/client/shared/key-shortcuts.js
@@ -169,17 +169,18 @@ KeyShortcuts.prototype = {
       if (this.doesEventMatchShortcut(event, shortcut)) {
         this.eventEmitter.emit(key, event);
       }
     }
   },
 
   on(key, listener) {
     if (typeof listener !== "function") {
-      throw new Error("KeyShortcuts.on() expects a function as second argument");
+      throw new Error("KeyShortcuts.on() expects a function as " +
+                      "second argument");
     }
     if (!this.keys.has(key)) {
       let shortcut = KeyShortcuts.parseElectronKey(this.window, key);
       this.keys.set(key, shortcut);
     }
     this.eventEmitter.on(key, listener);
   },
 
--- a/devtools/client/shared/l10n.js
+++ b/devtools/client/shared/l10n.js
@@ -11,17 +11,18 @@ const Services = require("Services");
  *
  * @param string stringBundleName
  *        The desired string bundle's name.
  */
 function LocalizationHelper(stringBundleName) {
   loader.lazyGetter(this, "stringBundle", () =>
     Services.strings.createBundle(stringBundleName));
   loader.lazyGetter(this, "ellipsis", () =>
-    Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString).data);
+    Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString)
+                  .data);
 }
 
 LocalizationHelper.prototype = {
   /**
    * L10N shortcut function.
    *
    * @param string name
    * @return string
@@ -46,18 +47,22 @@ LocalizationHelper.prototype = {
    * All numeric arguments will be fixed to 2 decimals and given a localized
    * decimal separator. Other arguments will be left alone.
    *
    * @param string name
    * @param array args
    * @return string
    */
   getFormatStrWithNumbers: function (name, ...args) {
-    let newArgs = args.map(x => typeof x == "number" ? this.numberWithDecimals(x, 2) : x);
-    return this.stringBundle.formatStringFromName(name, newArgs, newArgs.length);
+    let newArgs = args.map(x => {
+      return typeof x == "number" ? this.numberWithDecimals(x, 2) : x;
+    });
+    return this.stringBundle.formatStringFromName(name,
+                                                  newArgs,
+                                                  newArgs.length);
   },
 
   /**
    * Converts a number to a locale-aware string format and keeps a certain
    * number of decimals.
    *
    * @param number number
    *        The number to convert.
@@ -87,36 +92,42 @@ LocalizationHelper.prototype = {
     return number.toLocaleString(undefined, {
       maximumFractionDigits: decimals,
       minimumFractionDigits: decimals
     });
   }
 };
 
 /**
- * A helper for having the same interface as LocalizationHelper, but for more than
- * one file. Useful for abstracting l10n string locations.
+ * A helper for having the same interface as LocalizationHelper, but for more
+ * than one file. Useful for abstracting l10n string locations.
  */
 function MultiLocalizationHelper(...stringBundleNames) {
-  let instances = stringBundleNames.map(bundle => new LocalizationHelper(bundle));
+  let instances = stringBundleNames.map(bundle => {
+    return new LocalizationHelper(bundle);
+  });
 
-  // Get all function members of the LocalizationHelper class, making sure we're not
-  // executing any potential getters while doing so, and wrap all the
+  // Get all function members of the LocalizationHelper class, making sure we're
+  // not executing any potential getters while doing so, and wrap all the
   // methods we've found to work on all given string bundles.
   Object.getOwnPropertyNames(LocalizationHelper.prototype)
     .map(name => ({
       name: name,
-      descriptor: Object.getOwnPropertyDescriptor(LocalizationHelper.prototype, name)
+      descriptor: Object.getOwnPropertyDescriptor(LocalizationHelper.prototype,
+                                                  name)
     }))
     .filter(({ descriptor }) => descriptor.value instanceof Function)
     .forEach(method => {
       this[method.name] = (...args) => {
         for (let l10n of instances) {
           try {
             return method.descriptor.value.apply(l10n, args);
-          } catch (e) {}
+          } catch (e) {
+            // Do nothing
+          }
         }
+        return null;
       };
     });
 }
 
 exports.LocalizationHelper = LocalizationHelper;
 exports.MultiLocalizationHelper = MultiLocalizationHelper;
--- a/devtools/client/shared/node-attribute-parser.js
+++ b/devtools/client/shared/node-attribute-parser.js
@@ -29,20 +29,20 @@
 const TYPE_STRING = "string";
 const TYPE_URI = "uri";
 const TYPE_URI_LIST = "uriList";
 const TYPE_IDREF = "idref";
 const TYPE_IDREF_LIST = "idrefList";
 const TYPE_JS_RESOURCE_URI = "jsresource";
 const TYPE_CSS_RESOURCE_URI = "cssresource";
 
-const SVG_NS = "http://www.w3.org/2000/svg";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
+/* eslint-disable max-len */
 const ATTRIBUTE_TYPES = [
   {namespaceURI: HTML_NS, attributeName: "action", tagName: "form", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "background", tagName: "body", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "cite", tagName: "blockquote", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "cite", tagName: "q", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "cite", tagName: "del", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "cite", tagName: "ins", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "classid", tagName: "object", type: TYPE_URI},
@@ -64,19 +64,21 @@ const ATTRIBUTE_TYPES = [
   {namespaceURI: HTML_NS, attributeName: "form", tagName: "textarea", type: TYPE_IDREF},
   {namespaceURI: HTML_NS, attributeName: "formaction", tagName: "button", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "formaction", tagName: "input", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "headers", tagName: "td", type: TYPE_IDREF_LIST},
   {namespaceURI: HTML_NS, attributeName: "headers", tagName: "th", type: TYPE_IDREF_LIST},
   {namespaceURI: HTML_NS, attributeName: "href", tagName: "a", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "href", tagName: "area", type: TYPE_URI},
   {namespaceURI: "*", attributeName: "href", tagName: "link", type: TYPE_CSS_RESOURCE_URI,
-   isValid: (namespaceURI, tagName, attributes) => {
-     return getAttribute(attributes, "rel") === "stylesheet";
-   }},
+  /* eslint-enable */
+    isValid: (namespaceURI, tagName, attributes) => {
+      return getAttribute(attributes, "rel") === "stylesheet";
+    }},
+  /* eslint-disable max-len */
   {namespaceURI: "*", attributeName: "href", tagName: "link", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "href", tagName: "base", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "icon", tagName: "menuitem", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "list", tagName: "input", type: TYPE_IDREF},
   {namespaceURI: HTML_NS, attributeName: "longdesc", tagName: "img", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "longdesc", tagName: "frame", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "longdesc", tagName: "iframe", type: TYPE_URI},
   {namespaceURI: HTML_NS, attributeName: "manifest", tagName: "html", type: TYPE_URI},
@@ -110,16 +112,17 @@ const ATTRIBUTE_TYPES = [
   {namespaceURI: XUL_NS, attributeName: "popup", tagName: "*", type: TYPE_IDREF},
   {namespaceURI: XUL_NS, attributeName: "ref", tagName: "*", type: TYPE_URI},
   {namespaceURI: XUL_NS, attributeName: "removeelement", tagName: "*", type: TYPE_IDREF},
   {namespaceURI: XUL_NS, attributeName: "sortResource", tagName: "*", type: TYPE_URI},
   {namespaceURI: XUL_NS, attributeName: "sortResource2", tagName: "*", type: TYPE_URI},
   {namespaceURI: XUL_NS, attributeName: "src", tagName: "stringbundle", type: TYPE_URI},
   {namespaceURI: XUL_NS, attributeName: "template", tagName: "*", type: TYPE_IDREF},
   {namespaceURI: XUL_NS, attributeName: "tooltip", tagName: "*", type: TYPE_IDREF},
+  /* eslint-enable */
   // SVG links aren't handled yet, see bug 1158831.
   // {namespaceURI: SVG_NS, attributeName: "fill", tagName: "*", type: },
   // {namespaceURI: SVG_NS, attributeName: "stroke", tagName: "*", type: },
   // {namespaceURI: SVG_NS, attributeName: "markerstart", tagName: "*", type: },
   // {namespaceURI: SVG_NS, attributeName: "markermid", tagName: "*", type: },
   // {namespaceURI: SVG_NS, attributeName: "markerend", tagName: "*", type: },
   // {namespaceURI: SVG_NS, attributeName: "xlink:href", tagName: "*", type: }
 ];
@@ -183,17 +186,18 @@ var parsers = {
  * [
  *   {type: "uri", value: "uri2"},
  *   {type: "string", value: " "},
  *   {type: "uri", value: "uri1"}
  * ]
  */
 function parseAttribute(namespaceURI, tagName, attributes, attributeName) {
   if (!hasAttribute(attributes, attributeName)) {
-    throw new Error(`Attribute ${attributeName} isn't part of the provided attributes`);
+    throw new Error(`Attribute ${attributeName} isn't part of the ` +
+                    "provided attributes");
   }
 
   let type = getType(namespaceURI, tagName, attributes, attributeName);
   if (!type) {
     return [{
       type: TYPE_STRING,
       value: getAttribute(attributes, attributeName)
     }];
@@ -209,27 +213,30 @@ function parseAttribute(namespaceURI, ta
  * @param {Array} attributes The node's attributes, as a list of {name, value}
  * objects.
  * @param {String} attributeName The name of the attribute to get the type for.
  * @return {Object} null if no type exist for this attribute on this node, the
  * type object otherwise.
  */
 function getType(namespaceURI, tagName, attributes, attributeName) {
   for (let typeData of ATTRIBUTE_TYPES) {
-    let hasAttribute = attributeName === typeData.attributeName ||
-                       typeData.attributeName === "*";
+    let containsAttribute = attributeName === typeData.attributeName ||
+                            typeData.attributeName === "*";
     let hasNamespace = namespaceURI === typeData.namespaceURI ||
                        typeData.namespaceURI === "*";
     let hasTagName = tagName.toLowerCase() === typeData.tagName ||
                      typeData.tagName === "*";
     let isValid = typeData.isValid
-                  ? typeData.isValid(namespaceURI, tagName, attributes, attributeName)
+                  ? typeData.isValid(namespaceURI,
+                                     tagName,
+                                     attributes,
+                                     attributeName)
                   : true;
 
-    if (hasAttribute && hasNamespace && hasTagName && isValid) {
+    if (containsAttribute && hasNamespace && hasTagName && isValid) {
       return typeData.type;
     }
   }
 
   return null;
 }
 
 function getAttribute(attributes, attributeName) {
@@ -237,17 +244,17 @@ function getAttribute(attributes, attrib
     if (name === attributeName) {
       return value;
     }
   }
   return null;
 }
 
 function hasAttribute(attributes, attributeName) {
-  for (let {name, value} of attributes) {
+  for (let {name} of attributes) {
     if (name === attributeName) {
       return true;
     }
   }
   return false;
 }
 
 /**
--- a/devtools/client/shared/options-view.js
+++ b/devtools/client/shared/options-view.js
@@ -1,23 +1,26 @@
+"use strict";
+
 const EventEmitter = require("devtools/shared/event-emitter");
 const Services = require("Services");
 const { Preferences } = require("resource://gre/modules/Preferences.jsm");
 const OPTIONS_SHOWN_EVENT = "options-shown";
 const OPTIONS_HIDDEN_EVENT = "options-hidden";
 const PREF_CHANGE_EVENT = "pref-changed";
 
 /**
  * OptionsView constructor. Takes several options, all required:
  * - branchName: The name of the prefs branch, like "devtools.debugger."
  * - menupopup: The XUL `menupopup` item that contains the pref buttons.
  *
- * Fires an event, PREF_CHANGE_EVENT, with the preference name that changed as the second
- * argument. Fires events on opening/closing the XUL panel (OPTIONS_SHOW_EVENT, OPTIONS_HIDDEN_EVENT)
- * as the second argument in the listener, used for tests mostly.
+ * Fires an event, PREF_CHANGE_EVENT, with the preference name that changed as
+ * the second argument. Fires events on opening/closing the XUL panel
+ * (OPTIONS_SHOW_EVENT, OPTIONS_HIDDEN_EVENT) as the second argument in the
+ * listener, used for tests mostly.
  */
 const OptionsView = function (options = {}) {
   this.branchName = options.branchName;
   this.menupopup = options.menupopup;
   this.window = this.menupopup.ownerDocument.defaultView;
   let { document } = this.window;
   this.$ = document.querySelector.bind(document);
   this.$$ = (selector, parent = document) => parent.querySelectorAll(selector);
@@ -38,18 +41,18 @@ OptionsView.prototype = {
   initialize: function () {
     let { MutationObserver } = this.window;
     this._onPrefChange = this._onPrefChange.bind(this);
     this._onOptionChange = this._onOptionChange.bind(this);
     this._onPopupShown = this._onPopupShown.bind(this);
     this._onPopupHidden = this._onPopupHidden.bind(this);
 
     // We use a mutation observer instead of a click handler
-    // because the click handler is fired before the XUL menuitem updates
-    // it's checked status, which cascades incorrectly with the Preference observer.
+    // because the click handler is fired before the XUL menuitem updates its
+    // checked status, which cascades incorrectly with the Preference observer.
     this.mutationObserver = new MutationObserver(this._onOptionChange);
     let observerConfig = { attributes: true, attributeFilter: ["checked"]};
 
     // Sets observers and default options for all options
     for (let $el of this.$$("menuitem", this.menupopup)) {
       let prefName = $el.getAttribute("data-pref");
 
       if (this.prefObserver.get(prefName)) {
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -1,15 +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 {Cc, Ci, Cu} = require("chrome");
+const {Cc, Ci} = require("chrome");
 const {angleUtils} = require("devtools/client/shared/css-angle");
 const {colorUtils} = require("devtools/client/shared/css-color");
 const {getCSSLexer} = require("devtools/shared/css-lexer");
 const Services = require("Services");
 const EventEmitter = require("devtools/shared/event-emitter");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
@@ -393,17 +393,18 @@ OutputParser.prototype = {
       });
 
       if (options.colorSwatchClass) {
         let swatch = this._createNode("span", {
           class: options.colorSwatchClass,
           style: "background-color:" + color
         });
         this.colorSwatches.set(swatch, colorObj);
-        swatch.addEventListener("mousedown", this._onColorSwatchMouseDown, false);
+        swatch.addEventListener("mousedown", this._onColorSwatchMouseDown,
+                                false);
         EventEmitter.decorate(swatch);
         container.appendChild(swatch);
       }
 
       if (options.defaultColorType) {
         color = colorObj.toString();
         container.dataset.colorĀ = color;
       }
--- a/devtools/client/shared/poller.js
+++ b/devtools/client/shared/poller.js
@@ -76,17 +76,18 @@ Poller.prototype.off = function pollerOf
   } else {
     resolve();
   }
   return promise;
 };
 
 /**
  * Turns off polling and removes the reference to the poller function.
- * Resolves when the last outstanding `fn` call finishes if it's an async function.
+ * Resolves when the last outstanding `fn` call finishes if it's an async
+ * function.
  */
 Poller.prototype.destroy = function pollerDestroy() {
   return this.off().then(() => {
     this._destroyed = true;
     this._fn = null;
   });
 };
 
--- a/devtools/client/shared/prefs.js
+++ b/devtools/client/shared/prefs.js
@@ -56,32 +56,37 @@ function PrefsHelper(prefsRoot = "", pre
  * @param string prefName
  * @return any
  */
 function get(cache, prefType, prefsRoot, prefName) {
   let cachedPref = cache.get(prefName);
   if (cachedPref !== undefined) {
     return cachedPref;
   }
-  let value = Services.prefs["get" + prefType + "Pref"]([prefsRoot, prefName].join("."));
+  let value = Services.prefs["get" + prefType + "Pref"](
+    [prefsRoot, prefName].join(".")
+  );
   cache.set(prefName, value);
   return value;
 }
 
 /**
  * Helper method for setting a pref value.
  *
  * @param Map cache
  * @param string prefType
  * @param string prefsRoot
  * @param string prefName
  * @param any value
  */
 function set(cache, prefType, prefsRoot, prefName, value) {
-  Services.prefs["set" + prefType + "Pref"]([prefsRoot, prefName].join("."), value);
+  Services.prefs["set" + prefType + "Pref"](
+    [prefsRoot, prefName].join("."),
+    value
+  );
   cache.set(prefName, value);
 }
 
 /**
  * Maps a property name to a pref, defining lazy getters and setters.
  * Supported types are "Bool", "Char", "Int", "Float" (sugar around "Char"
  * type and casting), and "Json" (which is basically just sugar for "Char"
  * using the standard JSON serializer).
@@ -89,26 +94,34 @@ function set(cache, prefType, prefsRoot,
  * @param PrefsHelper self
  * @param Map cache
  * @param string accessorName
  * @param string prefType
  * @param string prefsRoot
  * @param string prefName
  * @param array serializer [optional]
  */
-function map(self, cache, accessorName, prefType, prefsRoot, prefName, serializer = { in: e => e, out: e => e }) {
+function map(self, cache, accessorName, prefType, prefsRoot, prefName,
+             serializer = { in: e => e, out: e => e }) {
   if (prefName in self) {
-    throw new Error(`Can't use ${prefName} because it overrides a property on the instance.`);
+    throw new Error(`Can't use ${prefName} because it overrides a property` +
+                    "on the instance.");
   }
   if (prefType == "Json") {
-    map(self, cache, accessorName, "Char", prefsRoot, prefName, { in: JSON.parse, out: JSON.stringify });
+    map(self, cache, accessorName, "Char", prefsRoot, prefName, {
+      in: JSON.parse,
+      out: JSON.stringify
+    });
     return;
   }
   if (prefType == "Float") {
-    map(self, cache, accessorName, "Char", prefsRoot, prefName, { in: Number.parseFloat, out: (n) => n + ""});
+    map(self, cache, accessorName, "Char", prefsRoot, prefName, {
+      in: Number.parseFloat,
+      out: (n) => n + ""
+    });
     return;
   }
 
   Object.defineProperty(self, accessorName, {
     get: () => serializer.in(get(cache, prefType, prefsRoot, prefName)),
     set: (e) => set(cache, prefType, prefsRoot, prefName, serializer.out(e))
   });
 }
--- a/devtools/client/shared/source-utils.js
+++ b/devtools/client/shared/source-utils.js
@@ -59,46 +59,51 @@ function parseURL(location) {
   try {
     url = new URL(location);
     // Definitions:
     // Example: https://foo.com:8888/file.js
     // `hostname`: "foo.com"
     // `host`: "foo.com:8888"
     //
     // sdk/url does not match several definitions.: both `host` and `hostname`
-    // are actually the `hostname` (even though this is the `host` property on the
-    // original nsIURL, with `hostPort` representing the actual `host` name, AH!!!)
-    // So normalize all that garbage here.
+    // are actually the `hostname` (even though this is the `host` property on
+    // the original nsIURL, with `hostPort` representing the actual `host` name,
+    // AH!!!). So normalize all that garbage here.
     let isChrome = isChromeScheme(location);
     let fileName = url.fileName || "/";
-    let hostname = isChrome ? null : url.hostname;
-    let host = isChrome ? null :
-               url.port ? `${url.host}:${url.port}` :
-               url.host;
+    let hostname, host;
+    if (isChrome) {
+      hostname = null;
+      host = null;
+    } else {
+      hostname = url.hostname;
+      host = url.port ? `${url.host}:${url.port}` : url.host;
+    }
 
     let parsed = Object.assign({}, url, { host, fileName, hostname });
     gURLStore.set(location, parsed);
     return parsed;
-  }
-  catch (e) {
+  } catch (e) {
     gURLStore.set(location, null);
     return null;
   }
 }
 
 /**
  * Parse a source into a short and long name as well as a host name.
  *
  * @param {String} source
- *        The source to parse. Can be a URI or names like "(eval)" or "self-hosted".
+ *        The source to parse. Can be a URI or names like "(eval)" or
+ *        "self-hosted".
  * @return {Object}
  *         An object with the following properties:
  *           - {String} short: A short name for the source.
  *             - "http://page.com/test.js#go?q=query" -> "test.js"
- *           - {String} long: The full, long name for the source, with hash/query stripped.
+ *           - {String} long: The full, long name for the source, with
+               hash/query stripped.
  *             - "http://page.com/test.js#go?q=query" -> "http://page.com/test.js"
  *           - {String?} host: If available, the host name for the source.
  *             - "http://page.com/test.js#go?q=query" -> "page.com"
  */
 function getSourceNames(source) {
   let data = gSourceNamesStore.get(source);
 
   if (data) {
@@ -109,17 +114,17 @@ function getSourceNames(source) {
   const sourceStr = source ? String(source) : "";
 
   // If `data:...` uri
   if (isDataScheme(sourceStr)) {
     let commaIndex = sourceStr.indexOf(",");
     if (commaIndex > -1) {
       // The `short` name for a data URI becomes `data:` followed by the actual
       // encoded content, omitting the MIME type, and charset.
-      let short = `data:${sourceStr.substring(commaIndex + 1)}`.slice(0, 100);
+      short = `data:${sourceStr.substring(commaIndex + 1)}`.slice(0, 100);
       let result = { short, long: sourceStr };
       gSourceNamesStore.set(source, result);
       return result;
     }
   }
 
   // If Scratchpad URI, like "Scratchpad/1"; no modifications,
   // and short/long are the same.
@@ -203,81 +208,87 @@ function isDataScheme(location, i = 0) {
          location.charCodeAt(++i) === CHAR_CODE_A &&
          location.charCodeAt(++i) === CHAR_CODE_COLON;
 }
 
 function isContentScheme(location, i = 0) {
   let firstChar = location.charCodeAt(i);
 
   switch (firstChar) {
-    case CHAR_CODE_H: // "http://" or "https://"
+    // "http://" or "https://"
+    case CHAR_CODE_H:
       if (location.charCodeAt(++i) === CHAR_CODE_T &&
-        location.charCodeAt(++i) === CHAR_CODE_T &&
-        location.charCodeAt(++i) === CHAR_CODE_P) {
+          location.charCodeAt(++i) === CHAR_CODE_T &&
+          location.charCodeAt(++i) === CHAR_CODE_P) {
         if (location.charCodeAt(i + 1) === CHAR_CODE_S) {
           ++i;
         }
         return isColonSlashSlash(location, i);
       }
       return false;
 
-    case CHAR_CODE_F: // "file://"
+    // "file://"
+    case CHAR_CODE_F:
       if (location.charCodeAt(++i) === CHAR_CODE_I &&
-        location.charCodeAt(++i) === CHAR_CODE_L &&
-        location.charCodeAt(++i) === CHAR_CODE_E) {
+          location.charCodeAt(++i) === CHAR_CODE_L &&
+          location.charCodeAt(++i) === CHAR_CODE_E) {
         return isColonSlashSlash(location, i);
       }
       return false;
 
-    case CHAR_CODE_A: // "app://"
+    // "app://"
+    case CHAR_CODE_A:
       if (location.charCodeAt(++i) == CHAR_CODE_P &&
-        location.charCodeAt(++i) == CHAR_CODE_P) {
+          location.charCodeAt(++i) == CHAR_CODE_P) {
         return isColonSlashSlash(location, i);
       }
       return false;
 
     default:
       return false;
   }
 }
 
 function isChromeScheme(location, i = 0) {
   let firstChar = location.charCodeAt(i);
 
   switch (firstChar) {
-    case CHAR_CODE_C: // "chrome://"
+    // "chrome://"
+    case CHAR_CODE_C:
       if (location.charCodeAt(++i) === CHAR_CODE_H &&
-        location.charCodeAt(++i) === CHAR_CODE_R &&
-        location.charCodeAt(++i) === CHAR_CODE_O &&
-        location.charCodeAt(++i) === CHAR_CODE_M &&
-        location.charCodeAt(++i) === CHAR_CODE_E) {
+          location.charCodeAt(++i) === CHAR_CODE_R &&
+          location.charCodeAt(++i) === CHAR_CODE_O &&
+          location.charCodeAt(++i) === CHAR_CODE_M &&
+          location.charCodeAt(++i) === CHAR_CODE_E) {
         return isColonSlashSlash(location, i);
       }
       return false;
 
-    case CHAR_CODE_R: // "resource://"
+    // "resource://"
+    case CHAR_CODE_R:
       if (location.charCodeAt(++i) === CHAR_CODE_E &&
-        location.charCodeAt(++i) === CHAR_CODE_S &&
-        location.charCodeAt(++i) === CHAR_CODE_O &&
-        location.charCodeAt(++i) === CHAR_CODE_U &&
-        location.charCodeAt(++i) === CHAR_CODE_R &&
-        location.charCodeAt(++i) === CHAR_CODE_C &&
-        location.charCodeAt(++i) === CHAR_CODE_E) {
+          location.charCodeAt(++i) === CHAR_CODE_S &&
+          location.charCodeAt(++i) === CHAR_CODE_O &&
+          location.charCodeAt(++i) === CHAR_CODE_U &&
+          location.charCodeAt(++i) === CHAR_CODE_R &&
+          location.charCodeAt(++i) === CHAR_CODE_C &&
+          location.charCodeAt(++i) === CHAR_CODE_E) {
         return isColonSlashSlash(location, i);
       }
       return false;
 
-    case CHAR_CODE_J: // "jar:file://"
+    // "jar:file://"
+    case CHAR_CODE_J:
       if (location.charCodeAt(++i) === CHAR_CODE_A &&
-        location.charCodeAt(++i) === CHAR_CODE_R &&
-        location.charCodeAt(++i) === CHAR_CODE_COLON &&
-        location.charCodeAt(++i) === CHAR_CODE_F &&
-        location.charCodeAt(++i) === CHAR_CODE_I &&
-        location.charCodeAt(++i) === CHAR_CODE_L &&
-        location.charCodeAt(++i) === CHAR_CODE_E) {
+          location.charCodeAt(++i) === CHAR_CODE_R &&
+          location.charCodeAt(++i) === CHAR_CODE_COLON &&
+          location.charCodeAt(++i) === CHAR_CODE_F &&
+          location.charCodeAt(++i) === CHAR_CODE_I &&
+          location.charCodeAt(++i) === CHAR_CODE_L &&
+          location.charCodeAt(++i) === CHAR_CODE_E) {
         return isColonSlashSlash(location, i);
       }
       return false;
 
     default:
       return false;
   }
 }
--- a/devtools/client/shared/telemetry.js
+++ b/devtools/client/shared/telemetry.js
@@ -34,16 +34,18 @@
  * Note:
  * You can view telemetry stats for your local Firefox instance via
  * about:telemetry.
  *
  * You can view telemetry stats for large groups of Firefox users at
  * telemetry.mozilla.org.
  */
 
+"use strict";
+
 const TOOLS_OPENED_PREF = "devtools.telemetry.tools.opened.version";
 
 this.Telemetry = function () {
   // Bind pretty much all functions so that callers do not need to.
   this.toolOpened = this.toolOpened.bind(this);
   this.toolClosed = this.toolClosed.bind(this);
   this.log = this.log.bind(this);
   this.logOncePerBrowserVersion = this.logOncePerBrowserVersion.bind(this);
--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -1,12 +1,14 @@
 /* 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-env browser */
+"use strict";
 (function () {
   const SCROLLBARS_URL = "chrome://devtools/skin/floating-scrollbars-dark-theme.css";
   let documentElement = document.documentElement;
 
   let os;
   let platform = navigator.platform;
   if (platform.startsWith("Win")) {
     os = "win";
@@ -28,20 +30,23 @@
 
   function forceStyle() {
     let computedStyle = window.getComputedStyle(documentElement);
     if (!computedStyle) {
       // Null when documentElement is not ready. This method is anyways not
       // required then as scrollbars would be in their state without flushing.
       return;
     }
-    let display = computedStyle.display; // Save display value
+    // Save display value
+    let display = computedStyle.display;
     documentElement.style.display = "none";
-    window.getComputedStyle(documentElement).display; // Flush
-    documentElement.style.display = display; // Restore
+    // Flush
+    window.getComputedStyle(documentElement).display;
+    // Restore
+    documentElement.style.display = display;
   }
 
   /*
    * Append a new processing instruction and return an object with
    *  - styleSheet: DOMNode
    *  - loadPromise: Promise that resolves once the sheets loads or errors
    */
   function appendStyleSheet(url) {
--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 /**
  * Colors for themes taken from:
  * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
  */
 
-const { Ci, Cu } = require("chrome");
+const { Cu } = require("chrome");
 const { NetUtil } = Cu.import("resource://gre/modules/NetUtil.jsm", {});
 const Services = require("Services");
 const { gDevTools } = require("devtools/client/framework/devtools");
 
 const VARIABLES_URI = "chrome://devtools/skin/variables.css";
 const THEME_SELECTOR_STRINGS = {
   light: ":root.theme-light {",
   dark: ":root.theme-dark {"
@@ -27,33 +27,35 @@ let variableFileContents;
  */
 function readURI(uri) {
   let stream = NetUtil.newChannel({
     uri: NetUtil.newURI(uri, "UTF-8"),
     loadUsingSystemPrincipal: true}
   ).open();
 
   let count = stream.available();
-  let data = NetUtil.readInputStreamToString(stream, count, { charset: "UTF-8" });
+  let data = NetUtil.readInputStreamToString(stream, count, {
+    charset: "UTF-8"
+  });
   stream.close();
   return data;
 }
 
 /**
  * Takes a theme name and returns the contents of its variable rule block.
  * The first time this runs fetches the variables CSS file and caches it.
  */
 function getThemeFile(name) {
   if (!variableFileContents) {
     variableFileContents = readURI(VARIABLES_URI);
   }
 
   // If there's no theme expected for this name, use `light` as default.
   let selector = THEME_SELECTOR_STRINGS[name] ||
-                 THEME_SELECTOR_STRINGS["light"];
+                 THEME_SELECTOR_STRINGS.light;
 
   // This is a pretty naive way to find the contents between:
   // selector {
   //   name: val;
   // }
   // There is test coverage for this feature (browser_theme.js)
   // so if an } is introduced in the variables file it will catch that.
   let theme = variableFileContents;
@@ -62,24 +64,27 @@ function getThemeFile(name) {
 
   return theme;
 }
 
 /**
  * Returns the string value of the current theme,
  * like "dark" or "light".
  */
-const getTheme = exports.getTheme = () => Services.prefs.getCharPref("devtools.theme");
+const getTheme = exports.getTheme = () => {
+  return Services.prefs.getCharPref("devtools.theme");
+};
 
 /**
- * Returns a color indicated by `type` (like "toolbar-background", or "highlight-red"),
- * with the ability to specify a theme, or use whatever the current theme is
- * if left unset. If theme not found, falls back to "light" theme. Returns null
- * if the type cannot be found for the theme given.
+ * Returns a color indicated by `type` (like "toolbar-background", or
+ * "highlight-red"), with the ability to specify a theme, or use whatever the
+ * current theme is if left unset. If theme not found, falls back to "light"
+ * theme. Returns null if the type cannot be found for the theme given.
  */
+/* eslint-disable no-unused-vars */
 const getColor = exports.getColor = (type, theme) => {
   let themeName = theme || getTheme();
   let themeFile = getThemeFile(themeName);
   let match = themeFile.match(new RegExp("--theme-" + type + ": (.*);"));
 
   // Return the appropriate variable in the theme, or otherwise, null.
   return match ? match[1] : null;
 };
@@ -94,8 +99,9 @@ const setTheme = exports.setTheme = (new
 
   Services.prefs.setCharPref("devtools.theme", newTheme);
   gDevTools.emit("pref-changed", {
     pref: "devtools.theme",
     newValue: newTheme,
     oldValue: oldTheme
   });
 };
+/* eslint-enable */
--- a/devtools/client/shared/undo.js
+++ b/devtools/client/shared/undo.js
@@ -1,70 +1,65 @@
 /* -*- 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/. */
 
+"use strict";
+
 /**
  * A simple undo stack manager.
  *
  * Actions are added along with the necessary code to
  * reverse the action.
  *
- * @param function aChange Called whenever the size or position
- *   of the undo stack changes, to use for updating undo-related
- *   UI.
- * @param integer aMaxUndo Maximum number of undo steps.
+ * @param integer maxUndo Maximum number of undo steps.
  *   defaults to 50.
  */
-function UndoStack(aMaxUndo)
-{
-  this.maxUndo = aMaxUndo || 50;
+function UndoStack(maxUndo) {
+  this.maxUndo = maxUndo || 50;
   this._stack = [];
 }
 
 exports.UndoStack = UndoStack;
 
 UndoStack.prototype = {
   // Current index into the undo stack.  Is positioned after the last
   // currently-applied change.
   _index: 0,
 
   // The current batch depth (see startBatch() for details)
   _batchDepth: 0,
 
-  destroy: function Undo_destroy()
-  {
+  destroy: function () {
     this.uninstallController();
     delete this._stack;
   },
 
   /**
    * Start a collection of related changes.  Changes will be batched
    * together into one undo/redo item until endBatch() is called.
    *
    * Batches can be nested, in which case the outer batch will contain
    * all items from the inner batches.  This allows larger user
    * actions made up of a collection of smaller actions to be
    * undone as a single action.
    */
-  startBatch: function Undo_startBatch()
-  {
+  startBatch: function () {
     if (this._batchDepth++ === 0) {
       this._batch = [];
     }
   },
 
   /**
    * End a batch of related changes, performing its action and adding
    * it to the undo stack.
    */
-  endBatch: function Undo_endBatch()
-  {
+  endBatch: function () {
     if (--this._batchDepth > 0) {
       return;
     }
 
     // Cut off the end of the undo stack at the current index,
     // and the beginning to prevent a stack larger than maxUndo.
     let start = Math.max((this._index + 1) - this.maxUndo, 0);
     this._stack = this._stack.slice(start, this._index);
@@ -87,120 +82,111 @@ UndoStack.prototype = {
     this._index = this._stack.length;
     entry.do();
     this._change();
   },
 
   /**
    * Perform an action, adding it to the undo stack.
    *
-   * @param function aDo Called to perform the action.
-   * @param function aUndo Called to reverse the action.
+   * @param function toDo Called to perform the action.
+   * @param function undo Called to reverse the action.
    */
-  do: function Undo_do(aDo, aUndo) {
+  do: function (toDo, undo) {
     this.startBatch();
-    this._batch.push({ do: aDo, undo: aUndo });
+    this._batch.push({ do: toDo, undo });
     this.endBatch();
   },
 
   /*
    * Returns true if undo() will do anything.
    */
-  canUndo: function Undo_canUndo()
-  {
+  canUndo: function () {
     return this._index > 0;
   },
 
   /**
    * Undo the top of the undo stack.
    *
    * @return true if an action was undone.
    */
-  undo: function Undo_canUndo()
-  {
+  undo: function () {
     if (!this.canUndo()) {
       return false;
     }
     this._stack[--this._index].undo();
     this._change();
     return true;
   },
 
   /**
    * Returns true if redo() will do anything.
    */
-  canRedo: function Undo_canRedo()
-  {
+  canRedo: function () {
     return this._stack.length > this._index;
   },
 
   /**
    * Redo the most recently undone action.
    *
    * @return true if an action was redone.
    */
-  redo: function Undo_canRedo()
-  {
+  redo: function () {
     if (!this.canRedo()) {
       return false;
     }
     this._stack[this._index++].do();
     this._change();
     return true;
   },
 
-  _change: function Undo__change()
-  {
+  _change: function () {
     if (this._controllerWindow) {
       this._controllerWindow.goUpdateCommand("cmd_undo");
       this._controllerWindow.goUpdateCommand("cmd_redo");
     }
   },
 
   /**
    * ViewController implementation for undo/redo.
    */
 
   /**
    * Install this object as a command controller.
    */
-  installController: function Undo_installController(aControllerWindow)
-  {
-    this._controllerWindow = aControllerWindow;
-    aControllerWindow.controllers.appendController(this);
+  installController: function (controllerWindow) {
+    this._controllerWindow = controllerWindow;
+    controllerWindow.controllers.appendController(this);
   },
 
   /**
    * Uninstall this object from the command controller.
    */
-  uninstallController: function Undo_uninstallController()
-  {
+  uninstallController: function () {
     if (!this._controllerWindow) {
       return;
     }
     this._controllerWindow.controllers.removeController(this);
   },
 
-  supportsCommand: function Undo_supportsCommand(aCommand)
-  {
-    return (aCommand == "cmd_undo" ||
-            aCommand == "cmd_redo");
+  supportsCommand: function (command) {
+    return (command == "cmd_undo" ||
+            command == "cmd_redo");
   },
 
-  isCommandEnabled: function Undo_isCommandEnabled(aCommand)
-  {
-    switch (aCommand) {
+  isCommandEnabled: function (command) {
+    switch (command) {
       case "cmd_undo": return this.canUndo();
       case "cmd_redo": return this.canRedo();
     }
     return false;
   },
 
-  doCommand: function Undo_doCommand(aCommand)
-  {
-    switch (aCommand) {
+  doCommand: function (command) {
+    switch (command) {
       case "cmd_undo": return this.undo();
       case "cmd_redo": return this.redo();
+      default: return null;
     }
   },
 
-  onEvent: function Undo_onEvent(aEvent) {},
+  onEvent: function (event) {},
 };
--- a/devtools/client/shared/view-source.js
+++ b/devtools/client/shared/view-source.js
@@ -3,32 +3,32 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 var { Task } = require("devtools/shared/task");
 
 var Services = require("Services");
 var {gDevTools} = require("devtools/client/framework/devtools");
-var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 
 /**
- * Tries to open a Stylesheet file in the Style Editor. If the file is not found,
- * it is opened in source view instead.
+ * Tries to open a Stylesheet file in the Style Editor. If the file is not
+ * found, it is opened in source view instead.
  * Returns a promise resolving to a boolean indicating whether or not
- * the source was able to be displayed in the StyleEditor, as the built-in Firefox
- * View Source is the fallback.
+ * the source was able to be displayed in the StyleEditor, as the built-in
+ * Firefox View Source is the fallback.
  *
  * @param {Toolbox} toolbox
  * @param {string} sourceURL
  * @param {number} sourceLine
  *
  * @return {Promise<boolean>}
  */
-exports.viewSourceInStyleEditor = Task.async(function* (toolbox, sourceURL, sourceLine) {
+exports.viewSourceInStyleEditor = Task.async(function* (toolbox, sourceURL,
+                                                        sourceLine) {
   let panel = yield toolbox.loadTool("styleeditor");
 
   try {
     yield panel.selectStyleSheet(sourceURL, sourceLine);
     yield toolbox.selectTool("styleeditor");
     return true;
   } catch (e) {
     exports.viewSource(toolbox, sourceURL, sourceLine);
@@ -44,35 +44,39 @@ exports.viewSourceInStyleEditor = Task.a
  * View Source is the fallback.
  *
  * @param {Toolbox} toolbox
  * @param {string} sourceURL
  * @param {number} sourceLine
  *
  * @return {Promise<boolean>}
  */
-exports.viewSourceInDebugger = Task.async(function* (toolbox, sourceURL, sourceLine) {
+exports.viewSourceInDebugger = Task.async(function* (toolbox, sourceURL,
+                                                     sourceLine) {
   // If the Debugger was already open, switch to it and try to show the
   // source immediately. Otherwise, initialize it and wait for the sources
   // to be added first.
   let debuggerAlreadyOpen = toolbox.getPanel("jsdebugger");
   let { panelWin: dbg } = yield toolbox.loadTool("jsdebugger");
 
   if (!debuggerAlreadyOpen) {
     yield dbg.DebuggerController.waitForSourcesLoaded();
   }
 
   let { DebuggerView } = dbg;
   let { Sources } = DebuggerView;
 
   let item = Sources.getItemForAttachment(a => a.source.url === sourceURL);
   if (item) {
     yield toolbox.selectTool("jsdebugger");
-    const isLoading = dbg.DebuggerController.getState().sources.selectedSource !== item.attachment.source.actor;
-    DebuggerView.setEditorLocation(item.attachment.source.actor, sourceLine, { noDebug: true });
+    const isLoading = dbg.DebuggerController.getState().sources.selectedSource
+                      !== item.attachment.source.actor;
+    DebuggerView.setEditorLocation(item.attachment.source.actor, sourceLine, {
+      noDebug: true
+    });
     if (isLoading) {
       yield dbg.DebuggerController.waitForSourceShown(sourceURL);
     }
     return true;
   }
 
   // If not found, still attempt to open in View Source
   exports.viewSource(toolbox, sourceURL, sourceLine);
@@ -133,9 +137,10 @@ exports.viewSource = Task.async(function
   if (browserWin) {
     return browserWin.BrowserViewSourceOfDocument({
       URL: sourceURL,
       lineNumber: sourceLine
     });
   }
   let utils = toolbox.gViewSourceUtils;
   utils.viewSource(sourceURL, null, toolbox.doc, sourceLine || 0);
+  return null;
 });
--- a/devtools/client/shared/webgl-utils.js
+++ b/devtools/client/shared/webgl-utils.js
@@ -3,45 +3,42 @@
   * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
 const { Cc, Ci } = require("chrome");
 const Services = require("Services");
 
 const WEBGL_CONTEXT_NAME = "experimental-webgl";
 
-function isWebGLForceEnabled()
-{
+function isWebGLForceEnabled() {
   return Services.prefs.getBoolPref("webgl.force-enabled");
 }
 
-function isWebGLSupportedByGFX()
-{
+function isWebGLSupportedByGFX() {
   let supported = false;
 
   try {
     let gfxInfo = Cc["@mozilla.org/gfx/info;1"].getService(Ci.nsIGfxInfo);
     let angle = gfxInfo.FEATURE_WEBGL_ANGLE;
     let opengl = gfxInfo.FEATURE_WEBGL_OPENGL;
 
     // if either the Angle or OpenGL renderers are available, WebGL should work
     supported = gfxInfo.getFeatureStatus(angle) === gfxInfo.FEATURE_STATUS_OK ||
                 gfxInfo.getFeatureStatus(opengl) === gfxInfo.FEATURE_STATUS_OK;
   } catch (e) {
     return false;
   }
   return supported;
 }
 
-function create3DContext(aCanvas)
-{
+function create3DContext(canvas) {
   // try to get a valid context from an existing canvas
   let context = null;
   try {
-    context = aCanvas.getContext(WEBGL_CONTEXT_NAME, aFlags);
+    context = canvas.getContext(WEBGL_CONTEXT_NAME, {});
   } catch (e) {
     return null;
   }
   return context;
 }
 
 function createCanvas(doc) {
   return doc.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
--- a/devtools/client/shared/widgets/BarGraphWidget.js
+++ b/devtools/client/shared/widgets/BarGraphWidget.js
@@ -1,39 +1,40 @@
 "use strict";
 
-const { Cc, Ci, Cu, Cr } = require("chrome");
-
 const { Heritage, setNamedTimeout, clearNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
 const { AbstractCanvasGraph, CanvasGraphUtils } = require("devtools/client/shared/widgets/Graphs");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 // Bar graph constants.
 
 const GRAPH_DAMPEN_VALUES_FACTOR = 0.75;
-const GRAPH_BARS_MARGIN_TOP = 1; // px
-const GRAPH_BARS_MARGIN_END = 1; // px
-const GRAPH_MIN_BARS_WIDTH = 5; // px
-const GRAPH_MIN_BLOCKS_HEIGHT = 1; // px
+
+// The following are in pixels
+const GRAPH_BARS_MARGIN_TOP = 1;
+const GRAPH_BARS_MARGIN_END = 1;
+const GRAPH_MIN_BARS_WIDTH = 5;
+const GRAPH_MIN_BLOCKS_HEIGHT = 1;
 
 const GRAPH_BACKGROUND_GRADIENT_START = "rgba(0,136,204,0.0)";
 const GRAPH_BACKGROUND_GRADIENT_END = "rgba(255,255,255,0.25)";
 
 const GRAPH_CLIPHEAD_LINE_COLOR = "#666";
 const GRAPH_SELECTION_LINE_COLOR = "#555";
 const GRAPH_SELECTION_BACKGROUND_COLOR = "rgba(0,136,204,0.25)";
 const GRAPH_SELECTION_STRIPES_COLOR = "rgba(255,255,255,0.1)";
 const GRAPH_REGION_BACKGROUND_COLOR = "transparent";
 const GRAPH_REGION_STRIPES_COLOR = "rgba(237,38,85,0.2)";
 
 const GRAPH_HIGHLIGHTS_MASK_BACKGROUND = "rgba(255,255,255,0.75)";
 const GRAPH_HIGHLIGHTS_MASK_STRIPES = "rgba(255,255,255,0.5)";
 
-const GRAPH_LEGEND_MOUSEOVER_DEBOUNCE = 50; // ms
+// in ms
+const GRAPH_LEGEND_MOUSEOVER_DEBOUNCE = 50;
 
 /**
  * A bar graph, plotting tuples of values as rectangles.
  *
  * @see AbstractCanvasGraph for emitted events and other options.
  *
  * Example usage:
  *   let graph = new BarGraphWidget(node);
@@ -139,17 +140,18 @@ BarGraphWidget.prototype = Heritage.exte
   },
 
   /**
    * Renders the graph's data source.
    * @see AbstractCanvasGraph.prototype.buildGraphImage
    */
   buildGraphImage: function () {
     if (!this.format || !this.format.length) {
-      throw "The graph format traits are mandatory to style the data source.";
+      throw new Error("The graph format traits are mandatory to style " +
+                      "the data source.");
     }
     let { canvas, ctx } = this._getNamedCanvas("bar-graph-data");
     let width = this._width;
     let height = this._height;
 
     let totalTypes = this.format.length;
     let totalTicks = this._data.length;
     let lastTick = this._data[totalTicks - 1].delta;
@@ -255,17 +257,18 @@ BarGraphWidget.prototype = Heritage.exte
    *        in the list may also specify { top, bottom } pixel values if the
    *        highlighting shouldn't span across the full height of the graph.
    * @param boolean inPixels
    *        Set this to true if the { start, end } values in the highlights
    *        list are pixel values, and not values from the data source.
    * @param function unpack [optional]
    *        @see AbstractCanvasGraph.prototype.getMappedSelection
    */
-  buildMaskImage: function (highlights, inPixels = false, unpack = e => e.delta) {
+  buildMaskImage: function (highlights, inPixels = false,
+                            unpack = e => e.delta) {
     // A null `highlights` array is used to clear the mask. An empty array
     // will mask the entire graph.
     if (!highlights) {
       return null;
     }
 
     // Get a render target for the highlights. It will be overlaid on top of
     // the existing graph, masking the areas that aren't highlighted.
@@ -290,21 +293,29 @@ BarGraphWidget.prototype = Heritage.exte
     let firstTick = unpack(this._data[0]);
     let lastTick = unpack(this._data[totalTicks - 1]);
 
     for (let { start, end, top, bottom } of highlights) {
       if (!inPixels) {
         start = CanvasGraphUtils.map(start, firstTick, lastTick, 0, width);
         end = CanvasGraphUtils.map(end, firstTick, lastTick, 0, width);
       }
-      let firstSnap = findFirst(this._blocksBoundingRects, e => e.start >= start);
-      let lastSnap = findLast(this._blocksBoundingRects, e => e.start >= start && e.end <= end);
+      let firstSnap = findFirst(this._blocksBoundingRects,
+                                e => e.start >= start);
+      let lastSnap = findLast(this._blocksBoundingRects,
+                              e => e.start >= start && e.end <= end);
 
       let x1 = firstSnap ? firstSnap.start : start;
-      let x2 = lastSnap ? lastSnap.end : firstSnap ? firstSnap.end : end;
+      let x2;
+      if (lastSnap) {
+        x2 = lastSnap.end;
+      } else {
+        x2 = firstSnap ? firstSnap.end : end;
+      }
+
       let y1 = top || 0;
       let y2 = bottom || height;
       ctx.clearRect(x1, y1, x2 - x1, y2 - y1);
     }
 
     return canvas;
   },
 
@@ -352,17 +363,18 @@ BarGraphWidget.prototype = Heritage.exte
 
     return maxHeight;
   },
 
   /**
    * Creates the legend container when constructing this graph.
    */
   _createLegend: function () {
-    let legendNode = this._legendNode = this._document.createElementNS(HTML_NS, "div");
+    let legendNode = this._legendNode = this._document.createElementNS(HTML_NS,
+                                                                       "div");
     legendNode.className = "bar-graph-widget-legend";
     this._container.appendChild(legendNode);
   },
 
   /**
    * Creates a legend item when constructing this graph.
    */
   _createLegendItem: function (color, label) {
@@ -385,27 +397,31 @@ BarGraphWidget.prototype = Heritage.exte
     itemNode.appendChild(colorNode);
     itemNode.appendChild(labelNode);
     this._legendNode.appendChild(itemNode);
   },
 
   /**
    * Invoked whenever a color node in the legend is hovered.
    */
-  _onLegendMouseOver: function (e) {
-    setNamedTimeout("bar-graph-debounce", GRAPH_LEGEND_MOUSEOVER_DEBOUNCE, () => {
-      let type = e.target.dataset.index;
-      let rects = this._blocksBoundingRects.filter(e => e.type == type);
+  _onLegendMouseOver: function (ev) {
+    setNamedTimeout(
+      "bar-graph-debounce",
+      GRAPH_LEGEND_MOUSEOVER_DEBOUNCE,
+      () => {
+        let type = ev.target.dataset.index;
+        let rects = this._blocksBoundingRects.filter(e => e.type == type);
 
-      this._originalHighlights = this._mask;
-      this._hasCustomHighlights = true;
-      this.setMask(rects, true);
+        this._originalHighlights = this._mask;
+        this._hasCustomHighlights = true;
+        this.setMask(rects, true);
 
-      this.emit("legend-hover", [type, rects]);
-    });
+        this.emit("legend-hover", [type, rects]);
+      }
+    );
   },
 
   /**
    * Invoked whenever a color node in the legend is unhovered.
    */
   _onLegendMouseOut: function () {
     clearNamedTimeout("bar-graph-debounce");
 
@@ -416,21 +432,21 @@ BarGraphWidget.prototype = Heritage.exte
     }
 
     this.emit("legend-unhover");
   },
 
   /**
    * Invoked whenever a color node in the legend is pressed.
    */
-  _onLegendMouseDown: function (e) {
-    e.preventDefault();
-    e.stopPropagation();
+  _onLegendMouseDown: function (ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
 
-    let type = e.target.dataset.index;
+    let type = ev.target.dataset.index;
     let rects = this._blocksBoundingRects.filter(e => e.type == type);
     let leftmost = rects[0];
     let rightmost = rects[rects.length - 1];
     if (!leftmost || !rightmost) {
       this.dropSelection();
     } else {
       this.setSelection({ start: leftmost.start, end: rightmost.end });
     }
@@ -451,26 +467,32 @@ BarGraphWidget.prototype = Heritage.exte
  * Finds the first element in an array that validates a predicate.
  * @param array
  * @param function predicate
  * @return number
  */
 function findFirst(array, predicate) {
   for (let i = 0, len = array.length; i < len; i++) {
     let element = array[i];
-    if (predicate(element)) return element;
+    if (predicate(element)) {
+      return element;
+    }
   }
+  return null;
 }
 
 /**
  * Finds the last element in an array that validates a predicate.
  * @param array
  * @param function predicate
  * @return number
  */
 function findLast(array, predicate) {
   for (let i = array.length - 1; i >= 0; i--) {
     let element = array[i];
-    if (predicate(element)) return element;
+    if (predicate(element)) {
+      return element;
+    }
   }
+  return null;
 }
 
 module.exports = BarGraphWidget;
--- a/devtools/client/shared/widgets/CubicBezierWidget.js
+++ b/devtools/client/shared/widgets/CubicBezierWidget.js
@@ -27,17 +27,16 @@
 
 const EventEmitter = require("devtools/shared/event-emitter");
 const {
   PREDEFINED,
   PRESETS,
   DEFAULT_PRESET_CATEGORY
 } = require("devtools/client/shared/widgets/CubicBezierPresets");
 const {getCSSLexer} = require("devtools/shared/css-lexer");
-const {Cc, Ci} = require("chrome");
 
 /**
  * CubicBezier data structure helper
  * Accepts an array of coordinates and exposes a few useful getters
  * @param {Array} coordinates i.e. [.42, 0, .58, 1]
  */
 function CubicBezier(coordinates) {
   if (!coordinates) {
@@ -109,20 +108,22 @@ BezierCanvas.prototype = {
    * Get P1 and P2 current top/left offsets so they can be positioned
    * @return {Array} Returns an array of 2 {top:String,left:String} objects
    */
   get offsets() {
     let p = this.padding, w = this.canvas.width, h = this.canvas.height;
 
     return [{
       left: w * (this.bezier.coordinates[0] * (1 - p[3] - p[1]) - p[3]) + "px",
-      top: h * (1 - this.bezier.coordinates[1] * (1 - p[0] - p[2]) - p[0]) + "px"
+      top: h * (1 - this.bezier.coordinates[1] * (1 - p[0] - p[2]) - p[0])
+           + "px"
     }, {
       left: w * (this.bezier.coordinates[2] * (1 - p[3] - p[1]) - p[3]) + "px",
-      top: h * (1 - this.bezier.coordinates[3] * (1 - p[0] - p[2]) - p[0]) + "px"
+      top: h * (1 - this.bezier.coordinates[3] * (1 - p[0] - p[2]) - p[0])
+           + "px"
     }];
   },
 
   /**
    * Convert an element's left/top offsets into coordinates
    */
   offsetsToCoordinates: function (element) {
     let p = this.padding, w = this.canvas.width, h = this.canvas.height;
@@ -395,17 +396,19 @@ CubicBezierWidget.prototype = {
   },
 
   /**
    * Get the current point coordinates and redraw the curve to match
    */
   _updateFromPoints: function () {
     // Get the new coordinates from the point's offsets
     let coordinates = this.bezierCanvas.offsetsToCoordinates(this.p1);
-    coordinates = coordinates.concat(this.bezierCanvas.offsetsToCoordinates(this.p2));
+    coordinates = coordinates.concat(
+      this.bezierCanvas.offsetsToCoordinates(this.p2)
+    );
 
     this.presets.refreshMenu(coordinates);
     this._redraw(coordinates);
   },
 
   /**
    * Redraw the curve
    * @param {Array} coordinates The array of control point coordinates
@@ -597,17 +600,18 @@ CubicBezierPresetWidget.prototype = {
     preset.bezierCanvas.plot({
       drawHandles: false,
       bezierThickness: 0.025
     });
     preset.appendChild(curve);
 
     // Create preset label
     let presetLabelElem = doc.createElement("p");
-    let presetDisplayLabel = this._normalizePresetLabel(categoryLabel, presetLabel);
+    let presetDisplayLabel = this._normalizePresetLabel(categoryLabel,
+                                                        presetLabel);
     presetLabelElem.textContent = presetDisplayLabel;
     preset.appendChild(presetLabelElem);
     preset.setAttribute("title", presetDisplayLabel);
 
     return preset;
   },
 
   _normalizePresetLabel: function (categoryLabel, presetLabel) {
@@ -754,17 +758,17 @@ TimingFunctionPreviewWidget.prototype = 
    * Preview a new timing function. The current preview will only be stopped if
    * the supplied function value is different from the previous one. If the
    * supplied function is invalid, the preview will stop.
    * @param {String} value
    */
   preview: function (value) {
     // Don't restart the preview animation if the value is the same
     if (value === this.previousValue) {
-      return false;
+      return;
     }
 
     clearTimeout(this.autoRestartAnimation);
 
     if (parseTimingFunction(value)) {
       this.dot.style.animationTimingFunction = value;
       this.restartAnimation();
     }
@@ -776,17 +780,16 @@ TimingFunctionPreviewWidget.prototype = 
    * Re-start the preview animation from the beginning
    */
   restartAnimation: function () {
     // Reset the animation duration in case it was changed
     this.dot.style.animationDuration = (this.PREVIEW_DURATION * 2) + "ms";
 
     // Just toggling the class won't do it unless there's a sync reflow
     this.dot.classList.remove("animate");
-    let w = this.dot.offsetWidth;
     this.dot.classList.add("animate");
 
     // Restart it again after a while
     this.autoRestartAnimation = setTimeout(this.restartAnimation.bind(this),
       this.PREVIEW_DURATION * 2);
   }
 };
 
--- a/devtools/client/shared/widgets/FastListWidget.js
+++ b/devtools/client/shared/widgets/FastListWidget.js
@@ -1,78 +1,78 @@
 /* -*- 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/. */
 "use strict";
 
 const EventEmitter = require("devtools/shared/event-emitter");
-const { Cu, Ci } = require("chrome");
 const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
 
 /**
  * A list menu widget that attempts to be very fast.
  *
  * Note: this widget should be used in tandem with the WidgetMethods in
  * view-helpers.js.
  *
  * @param nsIDOMNode aNode
  *        The element associated with the widget.
  */
-const FastListWidget = module.exports = function FastListWidget(aNode) {
-  this.document = aNode.ownerDocument;
+const FastListWidget = module.exports = function FastListWidget(node) {
+  this.document = node.ownerDocument;
   this.window = this.document.defaultView;
-  this._parent = aNode;
+  this._parent = node;
   this._fragment = this.document.createDocumentFragment();
 
   // This is a prototype element that each item added to the list clones.
   this._templateElement = this.document.createElement("hbox");
 
   // Create an internal scrollbox container.
   this._list = this.document.createElement("scrollbox");
   this._list.className = "fast-list-widget-container theme-body";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "vertical");
   this._list.setAttribute("tabindex", "0");
   this._list.addEventListener("keypress", e => this.emit("keyPress", e), false);
-  this._list.addEventListener("mousedown", e => this.emit("mousePress", e), false);
+  this._list.addEventListener("mousedown", e => this.emit("mousePress", e),
+                              false);
   this._parent.appendChild(this._list);
 
   this._orderedMenuElementsArray = [];
   this._itemsByElement = new Map();
 
   // This widget emits events that can be handled in a MenuContainer.
   EventEmitter.decorate(this);
 
   // Delegate some of the associated node's methods to satisfy the interface
   // required by MenuContainer instances.
-  ViewHelpers.delegateWidgetAttributeMethods(this, aNode);
-  ViewHelpers.delegateWidgetEventMethods(this, aNode);
+  ViewHelpers.delegateWidgetAttributeMethods(this, node);
+  ViewHelpers.delegateWidgetEventMethods(this, node);
 };
 
 FastListWidget.prototype = {
   /**
    * Inserts an item in this container at the specified index, optionally
    * grouping by name.
    *
    * @param number aIndex
    *        The position in the container intended for this item.
    * @param nsIDOMNode aContents
    *        The node to be displayed in the container.
    * @param Object aAttachment [optional]
    *        Extra data for the user.
    * @return nsIDOMNode
    *         The element associated with the displayed item.
    */
-  insertItemAt: function (aIndex, aContents, aAttachment = {}) {
+  insertItemAt: function (index, contents, attachment = {}) {
     let element = this._templateElement.cloneNode();
-    element.appendChild(aContents);
+    element.appendChild(contents);
 
-    if (aIndex >= 0) {
+    if (index >= 0) {
       throw new Error("FastListWidget only supports appending items.");
     }
 
     this._fragment.appendChild(element);
     this._orderedMenuElementsArray.push(element);
     this._itemsByElement.set(element, this);
 
     return element;
@@ -86,17 +86,16 @@ FastListWidget.prototype = {
   flush: function () {
     this._list.appendChild(this._fragment);
   },
 
   /**
    * Removes all of the child nodes from this container.
    */
   removeAllItems: function () {
-    let parent = this._parent;
     let list = this._list;
 
     while (list.hasChildNodes()) {
       list.firstChild.remove();
     }
 
     this._selectedItem = null;
 
@@ -199,21 +198,21 @@ FastListWidget.prototype = {
     boxObject.ensureElementIsVisible(element);
     boxObject.scrollBy(-this._list.clientWidth, 0);
   },
 
   /**
    * Sets the text displayed in this container when empty.
    * @param string aValue
    */
-  set _textWhenEmpty(aValue) {
+  set _textWhenEmpty(value) {
     if (this._emptyTextNode) {
-      this._emptyTextNode.setAttribute("value", aValue);
+      this._emptyTextNode.setAttribute("value", value);
     }
-    this._emptyTextValue = aValue;
+    this._emptyTextValue = value;
     this._showEmptyText();
   },
 
   /**
    * Creates and appends a label signaling that this container is empty.
    */
   _showEmptyText: function () {
     if (this._emptyTextNode || !this._emptyTextValue) {
--- a/devtools/client/shared/widgets/FilterWidget.js
+++ b/devtools/client/shared/widgets/FilterWidget.js
@@ -5,18 +5,17 @@
 "use strict";
 
 /**
   * This is a CSS Filter Editor widget used
   * for Rule View's filter swatches
   */
 
 const EventEmitter = require("devtools/shared/event-emitter");
-const { Cu, Cc, Ci } = require("chrome");
-const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
+const { Cc, Ci } = require("chrome");
 
 const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const STRINGS_URI = "chrome://devtools/locale/filterwidget.properties";
 const L10N = new LocalizationHelper(STRINGS_URI);
 
 const {cssTokenizer} = require("devtools/client/shared/css-parsing-utils");
 
 loader.lazyGetter(this, "asyncStorage",
@@ -534,25 +533,26 @@ CSSFilterEditorWidget.prototype = {
     }
 
     let id = +preset.dataset.id;
 
     this.getPresets().then(presets => {
       if (el.classList.contains("remove-button")) {
         // If the click happened on the remove button.
         presets.splice(id, 1);
-        this.setPresets(presets).then(this.renderPresets, e => console.error(e));
+        this.setPresets(presets).then(this.renderPresets,
+                                      ex => console.error(ex));
       } else {
         // Or if the click happened on a preset.
         let p = presets[id];
 
         this.setCssValue(p.value);
         this.addPresetInput.value = p.name;
       }
-    }, e => console.error(e));
+    }, ex => console.error(ex));
   },
 
   _togglePresets: function () {
     this.el.classList.toggle("show-presets");
     this.emit("render");
   },
 
   _savePreset: function (e) {
@@ -570,18 +570,19 @@ CSSFilterEditorWidget.prototype = {
       let index = presets.findIndex(preset => preset.name === name);
 
       if (index > -1) {
         presets[index].value = value;
       } else {
         presets.push({name, value});
       }
 
-      this.setPresets(presets).then(this.renderPresets, e => console.error(e));
-    }, e => console.error(e));
+      this.setPresets(presets).then(this.renderPresets,
+                                    ex => console.error(ex));
+    }, ex => console.error(ex));
   },
 
   /**
    * Clears the list and renders filters, binding required events.
    * There are some delegated events bound in _addEventListeners method
    */
   render: function () {
     if (!this.filters.length) {
@@ -835,17 +836,17 @@ CSSFilterEditorWidget.prototype = {
     // Unquoted.  This approach might change the original input -- for
     // example the original might be over-quoted.  But, this is
     // correct and probably good enough.
     return filter.value.replace(/[\\ \t()"']/g, "\\$&");
   },
 
   removeAt: function (index) {
     if (!this.filters[index]) {
-      return null;
+      return;
     }
 
     this.filters.splice(index, 1);
     this.emit("updated", this.getCssValue());
     this.render();
   },
 
   /**
--- a/devtools/client/shared/widgets/FlameGraph.js
+++ b/devtools/client/shared/widgets/FlameGraph.js
@@ -1,15 +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 { Task } = require("devtools/shared/task");
-const { ViewHelpers, setNamedTimeout, clearNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
+const { ViewHelpers, setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
 const { LocalizationHelper } = require("devtools/client/shared/l10n");
 
 loader.lazyRequireGetter(this, "promise");
 loader.lazyRequireGetter(this, "EventEmitter",
   "devtools/shared/event-emitter");
 
 loader.lazyRequireGetter(this, "getColor",
   "devtools/client/shared/theme", true);
@@ -23,62 +23,75 @@ loader.lazyRequireGetter(this, "demangle
 
 loader.lazyRequireGetter(this, "AbstractCanvasGraph",
   "devtools/client/shared/widgets/Graphs", true);
 loader.lazyRequireGetter(this, "GraphArea",
   "devtools/client/shared/widgets/Graphs", true);
 loader.lazyRequireGetter(this, "GraphAreaDragger",
   "devtools/client/shared/widgets/Graphs", true);
 
-const HTML_NS = "http://www.w3.org/1999/xhtml";
 const GRAPH_SRC = "chrome://devtools/content/shared/widgets/graphs-frame.xhtml";
 
 const L10N = new LocalizationHelper();
 
-const GRAPH_RESIZE_EVENTS_DRAIN = 100; // ms
+// ms
+const GRAPH_RESIZE_EVENTS_DRAIN = 100;
 
 const GRAPH_WHEEL_ZOOM_SENSITIVITY = 0.00035;
 const GRAPH_WHEEL_SCROLL_SENSITIVITY = 0.5;
 const GRAPH_KEYBOARD_ZOOM_SENSITIVITY = 20;
 const GRAPH_KEYBOARD_PAN_SENSITIVITY = 20;
 const GRAPH_KEYBOARD_ACCELERATION = 1.05;
 const GRAPH_KEYBOARD_TRANSLATION_MAX = 150;
-const GRAPH_MIN_SELECTION_WIDTH = 0.001; // ms
+
+// ms
+const GRAPH_MIN_SELECTION_WIDTH = 0.001;
 
-const GRAPH_HORIZONTAL_PAN_THRESHOLD = 10; // px
-const GRAPH_VERTICAL_PAN_THRESHOLD = 30; // px
+// px
+const GRAPH_HORIZONTAL_PAN_THRESHOLD = 10;
+const GRAPH_VERTICAL_PAN_THRESHOLD = 30;
 
 const FIND_OPTIMAL_TICK_INTERVAL_MAX_ITERS = 100;
-const TIMELINE_TICKS_MULTIPLE = 5; // ms
-const TIMELINE_TICKS_SPACING_MIN = 75; // px
+
+// ms
+const TIMELINE_TICKS_MULTIPLE = 5;
+// px
+const TIMELINE_TICKS_SPACING_MIN = 75;
 
-const OVERVIEW_HEADER_HEIGHT = 16; // px
-const OVERVIEW_HEADER_TEXT_FONT_SIZE = 9; // px
+// px
+const OVERVIEW_HEADER_HEIGHT = 16;
+const OVERVIEW_HEADER_TEXT_FONT_SIZE = 9;
 const OVERVIEW_HEADER_TEXT_FONT_FAMILY = "sans-serif";
-const OVERVIEW_HEADER_TEXT_PADDING_LEFT = 6; // px
-const OVERVIEW_HEADER_TEXT_PADDING_TOP = 5; // px
+// px
+const OVERVIEW_HEADER_TEXT_PADDING_LEFT = 6;
+const OVERVIEW_HEADER_TEXT_PADDING_TOP = 5;
 const OVERVIEW_HEADER_TIMELINE_STROKE_COLOR = "rgba(128, 128, 128, 0.5)";
 
-const FLAME_GRAPH_BLOCK_HEIGHT = 15; // px
-const FLAME_GRAPH_BLOCK_BORDER = 1; // px
-const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 10; // px
-const FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY = "message-box, Helvetica Neue, Helvetica, sans-serif";
-const FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP = 0; // px
-const FLAME_GRAPH_BLOCK_TEXT_PADDING_LEFT = 3; // px
-const FLAME_GRAPH_BLOCK_TEXT_PADDING_RIGHT = 3; // px
+// px
+const FLAME_GRAPH_BLOCK_HEIGHT = 15;
+const FLAME_GRAPH_BLOCK_BORDER = 1;
+const FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE = 10;
+const FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY = "message-box, Helvetica Neue," +
+                                           "Helvetica, sans-serif";
+// px
+const FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP = 0;
+const FLAME_GRAPH_BLOCK_TEXT_PADDING_LEFT = 3;
+const FLAME_GRAPH_BLOCK_TEXT_PADDING_RIGHT = 3;
 
-const PALLETTE_SIZE = 20; // Large enough number for a diverse pallette.
+// Large enough number for a diverse pallette.
+const PALLETTE_SIZE = 20;
 const PALLETTE_HUE_OFFSET = Math.random() * 90;
 const PALLETTE_HUE_RANGE = 270;
 const PALLETTE_SATURATION = 100;
 const PALLETTE_BRIGHTNESS = 55;
 const PALLETTE_OPACITY = 0.35;
 
 const COLOR_PALLETTE = Array.from(Array(PALLETTE_SIZE)).map((_, i) => "hsla" +
-  "(" + ((PALLETTE_HUE_OFFSET + (i / PALLETTE_SIZE * PALLETTE_HUE_RANGE)) | 0 % 360) +
+  "(" +
+  ((PALLETTE_HUE_OFFSET + (i / PALLETTE_SIZE * PALLETTE_HUE_RANGE)) | 0 % 360) +
   "," + PALLETTE_SATURATION + "%" +
   "," + PALLETTE_BRIGHTNESS + "%" +
   "," + PALLETTE_OPACITY +
   ")"
 );
 
 /**
  * A flamegraph visualization. This implementation is responsable only with
@@ -136,17 +149,18 @@ function FlameGraph(parent, sharpness) {
   this.setTheme();
 
   AbstractCanvasGraph.createIframe(GRAPH_SRC, parent, iframe => {
     this._iframe = iframe;
     this._window = iframe.contentWindow;
     this._document = iframe.contentDocument;
     this._pixelRatio = sharpness || this._window.devicePixelRatio;
 
-    let container = this._container = this._document.getElementById("graph-container");
+    let container =
+      this._container = this._document.getElementById("graph-container");
     container.className = "flame-graph-widget-container graph-widget-container";
 
     let canvas = this._canvas = this._document.getElementById("graph-canvas");
     canvas.className = "flame-graph-widget-canvas graph-widget-canvas";
 
     let bounds = parent.getBoundingClientRect();
     bounds.width = this.fixedWidth || bounds.width;
     bounds.height = this.fixedHeight || bounds.height;
@@ -196,17 +210,18 @@ function FlameGraph(parent, sharpness) {
     this._window.addEventListener("mousemove", this._onMouseMove);
     this._window.addEventListener("mousedown", this._onMouseDown);
     this._window.addEventListener("mouseup", this._onMouseUp);
     this._window.addEventListener("MozMousePixelScroll", this._onMouseWheel);
 
     let ownerWindow = this._parent.ownerDocument.defaultView;
     ownerWindow.addEventListener("resize", this._onResize);
 
-    this._animationId = this._window.requestAnimationFrame(this._onAnimationFrame);
+    this._animationId =
+      this._window.requestAnimationFrame(this._onAnimationFrame);
 
     this._ready.resolve(this);
     this.emit("ready", this);
   });
 }
 
 FlameGraph.prototype = {
   /**
@@ -410,32 +425,35 @@ FlameGraph.prototype = {
    * Sets the theme via `theme` to either "light" or "dark",
    * and updates the internal styling to match. Requires a redraw
    * to see the effects.
    */
   setTheme: function (theme) {
     theme = theme || "light";
     this.overviewHeaderBackgroundColor = getColor("body-background", theme);
     this.overviewHeaderTextColor = getColor("body-color", theme);
-    // Hard to get a color that is readable across both themes for the text on the flames
-    this.blockTextColor = getColor(theme === "dark" ? "selection-color" : "body-color", theme);
+    // Hard to get a color that is readable across both themes for the text
+    // on the flames
+    this.blockTextColor = getColor(theme === "dark" ? "selection-color"
+                                                    : "body-color", theme);
   },
 
   /**
    * The contents of this graph are redrawn only when something changed,
    * like the data source, or the selection bounds etc. This flag tracks
    * if the rendering is "dirty" and needs to be refreshed.
    */
   _shouldRedraw: false,
 
   /**
    * Animation frame callback, invoked on each tick of the refresh driver.
    */
   _onAnimationFrame: function () {
-    this._animationId = this._window.requestAnimationFrame(this._onAnimationFrame);
+    this._animationId =
+      this._window.requestAnimationFrame(this._onAnimationFrame);
     this._drawWidget();
   },
 
   /**
    * Redraws the widget when necessary. The actual graph is not refreshed
    * every time this function is called, only the cliphead, selection etc.
    */
   _drawWidget: function () {
@@ -454,25 +472,27 @@ FlameGraph.prototype = {
     let canvasWidth = this._width;
     let canvasHeight = this._height;
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
 
     let selection = this._selection;
     let selectionWidth = selection.end - selection.start;
     let selectionScale = canvasWidth / selectionWidth;
     this._drawTicks(selection.start, selectionScale);
-    this._drawPyramid(this._data, this._verticalOffset, selection.start, selectionScale);
+    this._drawPyramid(this._data, this._verticalOffset,
+                      selection.start, selectionScale);
     this._drawHeader(selection.start, selectionScale);
 
     // If the user isn't doing anything anymore, it's safe to stop drawing.
     // XXX: This doesn't handle cases where we should still be drawing even
     // if any input stops (e.g. smooth panning transitions after the user
     // finishes input). We don't care about that right now.
     if (this._userInputStack == 0) {
-      return void (this._shouldRedraw = false);
+      this._shouldRedraw = false;
+      return;
     }
     if (this._userInputStack < 0) {
       throw new Error("The user went back in time from a pyramid.");
     }
   },
 
   /**
    * Performs any necessary changes to the graph's state based on the
@@ -484,17 +504,16 @@ FlameGraph.prototype = {
     const KEY_CODE_LEFT = 37;
     const KEY_CODE_RIGHT = 39;
     const KEY_CODE_W = 87;
     const KEY_CODE_A = 65;
     const KEY_CODE_S = 83;
     const KEY_CODE_D = 68;
 
     let canvasWidth = this._width;
-    let canvasHeight = this._height;
     let pressed = this._keysPressed;
 
     let selection = this._selection;
     let selectionWidth = selection.end - selection.start;
     let selectionScale = canvasWidth / selectionWidth;
 
     let translation = [0, 0];
     let isZooming = false;
@@ -568,17 +587,21 @@ FlameGraph.prototype = {
   _drawHeader: function (dataOffset, dataScale) {
     let ctx = this._ctx;
     let canvasWidth = this._width;
     let headerHeight = OVERVIEW_HEADER_HEIGHT * this._pixelRatio;
 
     ctx.fillStyle = this.overviewHeaderBackgroundColor;
     ctx.fillRect(0, 0, canvasWidth, headerHeight);
 
-    this._drawTicks(dataOffset, dataScale, { from: 0, to: headerHeight, renderText: true });
+    this._drawTicks(dataOffset, dataScale, {
+      from: 0,
+      to: headerHeight,
+      renderText: true
+    });
   },
 
   /**
    * Draws the overhead ticks in this graph in the flame graph area.
    *
    * @param number dataOffset, dataScale, from, to, renderText
    *        Offsets and scales the data source by the specified amount.
    *        from and to determine the Y position of how far the stroke
@@ -599,17 +622,18 @@ FlameGraph.prototype = {
     let tickInterval = this._findOptimalTickInterval(dataScale);
 
     ctx.textBaseline = "top";
     ctx.font = fontSize + "px " + fontFamily;
     ctx.fillStyle = this.overviewHeaderTextColor;
     ctx.strokeStyle = OVERVIEW_HEADER_TIMELINE_STROKE_COLOR;
     ctx.beginPath();
 
-    for (let x = -scaledOffset % tickInterval; x < canvasWidth; x += tickInterval) {
+    for (let x = -scaledOffset % tickInterval; x < canvasWidth;
+         x += tickInterval) {
       let lineLeft = x;
       let textLeft = lineLeft + textPaddingLeft;
       let time = Math.round((x / dataScale + dataOffset) / this._pixelRatio);
       let label = time + " " + this.timelineTickUnits;
       if (renderText) {
         ctx.fillText(label, textLeft, textPaddingTop);
       }
       ctx.moveTo(lineLeft, from || 0);
@@ -630,47 +654,51 @@ FlameGraph.prototype = {
    *        Offsets and scales the data source by the specified amount.
    *        This is used for scrolling the visualization.
    */
   _drawPyramid: function (dataSource, verticalOffset, dataOffset, dataScale) {
     let ctx = this._ctx;
 
     let fontSize = FLAME_GRAPH_BLOCK_TEXT_FONT_SIZE * this._pixelRatio;
     let fontFamily = FLAME_GRAPH_BLOCK_TEXT_FONT_FAMILY;
-    let visibleBlocksInfo = this._drawPyramidFill(dataSource, verticalOffset, dataOffset, dataScale);
+    let visibleBlocksInfo = this._drawPyramidFill(dataSource, verticalOffset,
+                                                  dataOffset, dataScale);
 
     ctx.textBaseline = "middle";
     ctx.font = fontSize + "px " + fontFamily;
     ctx.fillStyle = this.blockTextColor;
 
-    this._drawPyramidText(visibleBlocksInfo, verticalOffset, dataOffset, dataScale);
+    this._drawPyramidText(visibleBlocksInfo, verticalOffset,
+                          dataOffset, dataScale);
   },
 
   /**
    * Fills all block inside this graph's pyramid.
    * @see FlameGraph.prototype._drawPyramid
    */
-  _drawPyramidFill: function (dataSource, verticalOffset, dataOffset, dataScale) {
+  _drawPyramidFill: function (dataSource, verticalOffset, dataOffset,
+                              dataScale) {
     let visibleBlocksInfoStore = [];
     let minVisibleBlockWidth = this._overflowCharWidth;
 
     for (let { color, blocks } of dataSource) {
       this._drawBlocksFill(
         color, blocks, verticalOffset, dataOffset, dataScale,
         visibleBlocksInfoStore, minVisibleBlockWidth);
     }
 
     return visibleBlocksInfoStore;
   },
 
   /**
    * Adds the text for all block inside this graph's pyramid.
    * @see FlameGraph.prototype._drawPyramid
    */
-  _drawPyramidText: function (blocksInfo, verticalOffset, dataOffset, dataScale) {
+  _drawPyramidText: function (blocksInfo, verticalOffset, dataOffset,
+                              dataScale) {
     for (let { block, rect } of blocksInfo) {
       this._drawBlockText(block, rect, verticalOffset, dataOffset, dataScale);
     }
   },
 
   /**
    * Fills a group of blocks sharing the same style.
    *
@@ -689,37 +717,38 @@ FlameGraph.prototype = {
    *        final baked coordinates and dimensions, after drawing them.
    *        The provided array will be populated.
    * @param number minVisibleBlockWidth
    *        The minimum width of the blocks that will be added into
    *        the `visibleBlocksInfoStore`.
    */
   _drawBlocksFill: function (
     color, blocks, verticalOffset, dataOffset, dataScale,
-    visibleBlocksInfoStore, minVisibleBlockWidth)
-  {
+    visibleBlocksInfoStore, minVisibleBlockWidth) {
     let ctx = this._ctx;
     let canvasWidth = this._width;
     let canvasHeight = this._height;
     let scaledOffset = dataOffset * dataScale;
 
     ctx.fillStyle = color;
     ctx.beginPath();
 
     for (let block of blocks) {
       let { x, y, width, height } = block;
       let rectLeft = x * this._pixelRatio * dataScale - scaledOffset;
-      let rectTop = (y - verticalOffset + OVERVIEW_HEADER_HEIGHT) * this._pixelRatio;
+      let rectTop = (y - verticalOffset + OVERVIEW_HEADER_HEIGHT)
+                    * this._pixelRatio;
       let rectWidth = width * this._pixelRatio * dataScale;
       let rectHeight = height * this._pixelRatio;
 
-      if (rectLeft > canvasWidth || // Too far right.
-          rectLeft < -rectWidth ||  // Too far left.
-          rectTop > canvasHeight || // Too far bottom.
-          rectTop < -rectHeight) {  // Too far top.
+      // Too far respectively right/left/bottom/top
+      if (rectLeft > canvasWidth ||
+          rectLeft < -rectWidth ||
+          rectTop > canvasHeight ||
+          rectTop < -rectHeight) {
         continue;
       }
 
       // Clamp the blocks position to start at 0. Avoid negative X coords,
       // to properly place the text inside the blocks.
       if (rectLeft < 0) {
         rectWidth += rectLeft;
         rectLeft = 0;
@@ -761,21 +790,21 @@ FlameGraph.prototype = {
    *        Think of them as screen-space values, vs. object-space values. These
    *        differ from the scalars in `block` when the graph is scaled/panned.
    * @param number verticalOffset
    *        Offsets the drawing vertically by the specified amount.
    * @param number dataOffset, dataScale
    *        Offsets and scales the data source by the specified amount.
    *        This is used for scrolling the visualization.
    */
-  _drawBlockText: function (block, rect, verticalOffset, dataOffset, dataScale) {
+  _drawBlockText: function (block, rect, verticalOffset, dataOffset,
+                            dataScale) {
     let ctx = this._ctx;
-    let scaledOffset = dataOffset * dataScale;
 
-    let { x, y, width, height, text } = block;
+    let { text } = block;
     let { rectLeft, rectTop, rectWidth, rectHeight } = rect;
 
     let paddingTop = FLAME_GRAPH_BLOCK_TEXT_PADDING_TOP * this._pixelRatio;
     let paddingLeft = FLAME_GRAPH_BLOCK_TEXT_PADDING_LEFT * this._pixelRatio;
     let paddingRight = FLAME_GRAPH_BLOCK_TEXT_PADDING_RIGHT * this._pixelRatio;
     let totalHorizontalPadding = paddingLeft + paddingRight;
 
     // Clamp the blocks position to start at 0. Avoid negative X coords,
@@ -844,18 +873,20 @@ FlameGraph.prototype = {
    * context state (font size, family etc.). This provides a close enough
    * value to use in `_getTextWidthApprox`.
    *
    * @return number
    *         The average letter width.
    */
   _calcAverageCharWidth: function () {
     let letterWidthsSum = 0;
-    let start = 32; // space
-    let end = 123; // "z"
+    // space
+    let start = 32;
+    // "z"
+    let end = 123;
 
     for (let i = start; i < end; i++) {
       let char = String.fromCharCode(i);
       letterWidthsSum += this._getTextWidth(char);
     }
 
     return letterWidthsSum / (end - start);
   },
@@ -876,17 +907,18 @@ FlameGraph.prototype = {
     if (textWidth < maxWidth) {
       return text;
     }
     if (this._overflowCharWidth > maxWidth) {
       return "";
     }
     for (let i = 1, len = text.length; i <= len; i++) {
       let trimmedText = text.substring(0, len - i);
-      let trimmedWidth = this._getTextWidthApprox(trimmedText) + this._overflowCharWidth;
+      let trimmedWidth = this._getTextWidthApprox(trimmedText)
+                         + this._overflowCharWidth;
       if (trimmedWidth < maxWidth) {
         return trimmedText + this.overflowChar;
       }
     }
     return "";
   },
 
   /**
@@ -924,17 +956,16 @@ FlameGraph.prototype = {
 
   /**
    * Listener for the "mousemove" event on the graph's container.
    */
   _onMouseMove: function (e) {
     let {mouseX, mouseY} = this._getRelativeEventCoordinates(e);
 
     let canvasWidth = this._width;
-    let canvasHeight = this._height;
 
     let selection = this._selection;
     let selectionWidth = selection.end - selection.start;
     let selectionScale = canvasWidth / selectionWidth;
 
     let horizDrag = this._selectionDragger;
     let vertDrag = this._verticalOffsetDragger;
 
@@ -950,27 +981,32 @@ FlameGraph.prototype = {
       let vertDiff = Math.abs(vertDrag.origin - mouseY);
       if (vertDiff > this.verticalPanThreshold) {
         this._verticalDragDirection = Math.sign(vertDrag.origin - mouseY);
         this._verticalDragEnabled = true;
       }
     }
 
     if (horizDrag.origin != null && this._horizontalDragEnabled) {
-      let relativeX = mouseX + this._horizontalDragDirection * this.horizontalPanThreshold;
-      selection.start = horizDrag.anchor.start + (horizDrag.origin - relativeX) / selectionScale;
-      selection.end = horizDrag.anchor.end + (horizDrag.origin - relativeX) / selectionScale;
+      let relativeX = mouseX + this._horizontalDragDirection *
+                               this.horizontalPanThreshold;
+      selection.start = horizDrag.anchor.start +
+                        (horizDrag.origin - relativeX) / selectionScale;
+      selection.end = horizDrag.anchor.end +
+                      (horizDrag.origin - relativeX) / selectionScale;
       this._normalizeSelectionBounds();
       this._shouldRedraw = true;
       this.emit("selecting");
     }
 
     if (vertDrag.origin != null && this._verticalDragEnabled) {
-      let relativeY = mouseY + this._verticalDragDirection * this.verticalPanThreshold;
-      this._verticalOffset = vertDrag.anchor + (vertDrag.origin - relativeY) / this._pixelRatio;
+      let relativeY = mouseY +
+                      this._verticalDragDirection * this.verticalPanThreshold;
+      this._verticalOffset = vertDrag.anchor +
+                             (vertDrag.origin - relativeY) / this._pixelRatio;
       this._normalizeVerticalOffset();
       this._shouldRedraw = true;
       this.emit("panning-vertically");
     }
   },
 
   /**
    * Listener for the "mousedown" event on the graph's container.
@@ -1006,17 +1042,16 @@ FlameGraph.prototype = {
 
   /**
    * Listener for the "wheel" event on the graph's container.
    */
   _onMouseWheel: function (e) {
     let {mouseX} = this._getRelativeEventCoordinates(e);
 
     let canvasWidth = this._width;
-    let canvasHeight = this._height;
 
     let selection = this._selection;
     let selectionWidth = selection.end - selection.start;
     let selectionScale = canvasWidth / selectionWidth;
 
     switch (e.axis) {
       case e.VERTICAL_AXIS: {
         let distFromStart = mouseX;
@@ -1221,17 +1256,18 @@ var FlameGraphUtils = {
       isRoot: false,
       isLeaf: false,
       isMetaCategoryOut: false
     };
 
     // Take the timestamp of the first sample as prevTime. 0 is incorrect due
     // to circular buffer wraparound. If wraparound happens, then the first
     // sample will have an incorrect, large duration.
-    let prevTime = samplesData.length > 0 ? samplesData[0][SAMPLE_TIME_SLOT] : 0;
+    let prevTime = samplesData.length > 0 ? samplesData[0][SAMPLE_TIME_SLOT]
+                                          : 0;
     let prevFrames = [];
     let sampleFrames = [];
     let sampleFrameKeys = [];
 
     for (let i = 1; i < samplesData.length; i++) {
       let sample = samplesData[i];
       let time = sample[SAMPLE_TIME_SLOT];
 
@@ -1258,18 +1294,19 @@ var FlameGraphUtils = {
       while (stackIndex !== null) {
         let stackEntry = stacksData[stackIndex];
         let frameIndex = stackEntry[STACK_FRAME_SLOT];
 
         // Fetch the stack prefix (i.e. older frames) index.
         stackIndex = stackEntry[STACK_PREFIX_SLOT];
 
         // Inflate the frame.
-        let inflatedFrame = getOrAddInflatedFrame(inflatedFrameCache, frameIndex,
-                                                  frameTable, stringTable);
+        let inflatedFrame = getOrAddInflatedFrame(inflatedFrameCache,
+                                                  frameIndex, frameTable,
+                                                  stringTable);
 
         mutableFrameKeyOptions.isRoot = stackIndex === null;
         mutableFrameKeyOptions.isLeaf = stackDepth === 0;
         let frameKey = inflatedFrame.getFrameKey(mutableFrameKeyOptions);
 
         // If not skipping the frame, add it to the current level. The (root)
         // node isn't useful for flame graphs.
         if (frameKey !== "" && frameKey !== "(root)") {
@@ -1312,30 +1349,30 @@ var FlameGraphUtils = {
       for (let frameIndex = 0; frameIndex < stackDepth; frameIndex++) {
         let key = sampleFrameKeys[frameIndex];
         let prevFrame = prevFrames[frameIndex];
 
         // Frames at the same location and the same depth will be reused.
         // If there is a block already created, change its width.
         if (prevFrame && prevFrame.frameKey === key) {
           prevFrame.width = (time - prevFrame.startTime);
-        }
-        // Otherwise, create a new block for this frame at this depth,
-        // using a simple location based salt for picking a color.
-        else {
+        } else {
+          // Otherwise, create a new block for this frame at this depth,
+          // using a simple location based salt for picking a color.
           let hash = this._getStringHash(key);
           let bucket = buckets[hash % PALLETTE_SIZE];
 
           let label;
           if (isIdleFrame) {
             label = key;
           } else {
             label = labelCache[key];
             if (!label) {
-              label = labelCache[key] = this._formatLabel(key, sampleFrames[frameIndex]);
+              label = labelCache[key] =
+                this._formatLabel(key, sampleFrames[frameIndex]);
             }
           }
 
           bucket.push(prevFrames[frameIndex] = {
             startTime: prevTime,
             frameKey: key,
             x: prevTime,
             y: frameIndex * FLAME_GRAPH_BLOCK_HEIGHT,
@@ -1399,18 +1436,20 @@ var FlameGraphUtils = {
    * Takes a frame key and a frame, and returns a string that should be
    * displayed in its flame block.
    *
    * @param string key
    * @param object frame
    * @return string
    */
   _formatLabel: function (key, frame) {
-    let { functionName, fileName, line } = FrameUtils.parseLocation(key, frame.line);
-    let label = FrameUtils.shouldDemangle(functionName) ? demangle(functionName) : functionName;
+    let { functionName, fileName, line } =
+      FrameUtils.parseLocation(key, frame.line);
+    let label = FrameUtils.shouldDemangle(functionName) ? demangle(functionName)
+                                                        : functionName;
 
     if (fileName) {
       label += ` (${fileName}${line != null ? (":" + line) : ""})`;
     }
 
     return label;
   }
 };
--- a/devtools/client/shared/widgets/Graphs.js
+++ b/devtools/client/shared/widgets/Graphs.js
@@ -1,50 +1,53 @@
 /* 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 { Cc, Ci, Cu, Cr } = require("chrome");
-
 const { Task } = require("devtools/shared/task");
-const { Heritage, setNamedTimeout, clearNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
+const { setNamedTimeout } = require("devtools/client/shared/widgets/view-helpers");
 const { getCurrentZoom } = require("devtools/shared/layout/utils");
 
 loader.lazyRequireGetter(this, "promise");
 loader.lazyRequireGetter(this, "EventEmitter",
   "devtools/shared/event-emitter");
 
 loader.lazyImporter(this, "DevToolsWorker",
   "resource://devtools/shared/worker/worker.js");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const GRAPH_SRC = "chrome://devtools/content/shared/widgets/graphs-frame.xhtml";
 const WORKER_URL =
   "resource://devtools/client/shared/widgets/GraphsWorker.js";
 
 // Generic constants.
 
-const GRAPH_RESIZE_EVENTS_DRAIN = 100; // ms
+// ms
+const GRAPH_RESIZE_EVENTS_DRAIN = 100;
 const GRAPH_WHEEL_ZOOM_SENSITIVITY = 0.00075;
 const GRAPH_WHEEL_SCROLL_SENSITIVITY = 0.1;
-const GRAPH_WHEEL_MIN_SELECTION_WIDTH = 10; // px
+// px
+const GRAPH_WHEEL_MIN_SELECTION_WIDTH = 10;
 
-const GRAPH_SELECTION_BOUNDARY_HOVER_LINE_WIDTH = 4; // px
-const GRAPH_SELECTION_BOUNDARY_HOVER_THRESHOLD = 10; // px
+// px
+const GRAPH_SELECTION_BOUNDARY_HOVER_LINE_WIDTH = 4;
+const GRAPH_SELECTION_BOUNDARY_HOVER_THRESHOLD = 10;
 const GRAPH_MAX_SELECTION_LEFT_PADDING = 1;
 const GRAPH_MAX_SELECTION_RIGHT_PADDING = 1;
 
-const GRAPH_REGION_LINE_WIDTH = 1; // px
+// px
+const GRAPH_REGION_LINE_WIDTH = 1;
 const GRAPH_REGION_LINE_COLOR = "rgba(237,38,85,0.8)";
 
-const GRAPH_STRIPE_PATTERN_WIDTH = 16; // px
-const GRAPH_STRIPE_PATTERN_HEIGHT = 16; // px
-const GRAPH_STRIPE_PATTERN_LINE_WIDTH = 2; // px
-const GRAPH_STRIPE_PATTERN_LINE_SPACING = 4; // px
+// px
+const GRAPH_STRIPE_PATTERN_WIDTH = 16;
+const GRAPH_STRIPE_PATTERN_HEIGHT = 16;
+const GRAPH_STRIPE_PATTERN_LINE_WIDTH = 2;
+const GRAPH_STRIPE_PATTERN_LINE_SPACING = 4;
 
 /**
  * Small data primitives for all graphs.
  */
 this.GraphCursor = function () {
   this.x = null;
   this.y = null;
 };
@@ -104,17 +107,18 @@ this.AbstractCanvasGraph = function (par
 
   AbstractCanvasGraph.createIframe(GRAPH_SRC, parent, iframe => {
     this._iframe = iframe;
     this._window = iframe.contentWindow;
     this._topWindow = this._window.top;
     this._document = iframe.contentDocument;
     this._pixelRatio = sharpness || this._window.devicePixelRatio;
 
-    let container = this._container = this._document.getElementById("graph-container");
+    let container =
+      this._container = this._document.getElementById("graph-container");
     container.className = name + "-widget-container graph-widget-container";
 
     let canvas = this._canvas = this._document.getElementById("graph-canvas");
     canvas.className = name + "-widget-canvas graph-widget-canvas";
 
     let bounds = parent.getBoundingClientRect();
     bounds.width = this.fixedWidth || bounds.width;
     bounds.height = this.fixedHeight || bounds.height;
@@ -144,17 +148,18 @@ this.AbstractCanvasGraph = function (par
     this._window.addEventListener("mousemove", this._onMouseMove);
     this._window.addEventListener("mousedown", this._onMouseDown);
     this._window.addEventListener("MozMousePixelScroll", this._onMouseWheel);
     this._window.addEventListener("mouseout", this._onMouseOut);
 
     let ownerWindow = this._parent.ownerDocument.defaultView;
     ownerWindow.addEventListener("resize", this._onResize);
 
-    this._animationId = this._window.requestAnimationFrame(this._onAnimationFrame);
+    this._animationId =
+      this._window.requestAnimationFrame(this._onAnimationFrame);
 
     this._ready.resolve(this);
     this.emit("ready", this);
   });
 };
 
 AbstractCanvasGraph.prototype = {
   /**
@@ -251,17 +256,18 @@ AbstractCanvasGraph.prototype = {
   },
 
   /**
    * Builds and caches a graph image, based on the data source supplied
    * in `setData`. The graph image is not rebuilt on each frame, but
    * only when the data source changes.
    */
   buildGraphImage: function () {
-    throw "This method needs to be implemented by inheriting classes.";
+    let error = "This method needs to be implemented by inheriting classes.";
+    throw new Error(error);
   },
 
   /**
    * Optionally builds and caches a mask image for this graph, composited
    * over the data image created via `buildGraphImage`. Inheriting classes
    * may override this method.
    */
   buildMaskImage: function () {
@@ -320,20 +326,21 @@ AbstractCanvasGraph.prototype = {
    * See the "Language" section in the constructor documentation
    * for details about what "regions" represent.
    *
    * @param array regions
    *        A list of { start, end } values.
    */
   setRegions: function (regions) {
     if (!this._cachedGraphImage) {
-      throw "Can't highlight regions on a graph with no data displayed.";
+      throw new Error("Can't highlight regions on a graph with " +
+                      "no data displayed.");
     }
     if (this._regions) {
-      throw "Regions were already highlighted on the graph.";
+      throw new Error("Regions were already highlighted on the graph.");
     }
     this._regions = regions.map(e => ({
       start: e.start * this.dataScaleX,
       end: e.end * this.dataScaleX
     }));
     this._bakeRegions(this._regions, this._cachedGraphImage);
     this._shouldRedraw = true;
   },
@@ -371,17 +378,17 @@ AbstractCanvasGraph.prototype = {
    * See the "Language" section in the constructor documentation
    * for details about what a "selection" represents.
    *
    * @param object selection
    *        The selection's { start, end } values.
    */
   setSelection: function (selection) {
     if (!selection || selection.start == null || selection.end == null) {
-      throw "Invalid selection coordinates";
+      throw new Error("Invalid selection coordinates");
     }
     if (!this.isSelectionDifferent(selection)) {
       return;
     }
     this._selection.start = selection.start;
     this._selection.end = selection.end;
     this._shouldRedraw = true;
     this.emit("selecting");
@@ -411,20 +418,21 @@ AbstractCanvasGraph.prototype = {
    * @param object selection
    *        The selection's { start, end } values.
    * @param object { mapStart, mapEnd } mapping [optional]
    *        Invoked when retrieving the numbers in the data source representing
    *        the first and last values, on the X axis.
    */
   setMappedSelection: function (selection, mapping = {}) {
     if (!this.hasData()) {
-      throw "A data source is necessary for retrieving a mapped selection.";
+      throw new Error("A data source is necessary for retrieving " +
+                      "a mapped selection.");
     }
     if (!selection || selection.start == null || selection.end == null) {
-      throw "Invalid selection coordinates";
+      throw new Error("Invalid selection coordinates");
     }
 
     let { mapStart, mapEnd } = mapping;
     let startTime = (mapStart || (e => e.delta))(this._data[0]);
     let endTime = (mapEnd || (e => e.delta))(this._data[this._data.length - 1]);
 
     // The selection's start and end values are not guaranteed to be ascending.
     // Also make sure that the selection bounds fit inside the data bounds.
@@ -443,17 +451,18 @@ AbstractCanvasGraph.prototype = {
    * @param object { mapStart, mapEnd } mapping [optional]
    *        Invoked when retrieving the numbers in the data source representing
    *        the first and last values, on the X axis.
    * @return object
    *         The mapped selection's { min, max } values.
    */
   getMappedSelection: function (mapping = {}) {
     if (!this.hasData()) {
-      throw "A data source is necessary for retrieving a mapped selection.";
+      throw new Error("A data source is necessary for retrieving a " +
+                      "mapped selection.");
     }
     if (!this.hasSelection() && !this.hasSelectionInProgress()) {
       return { min: null, max: null };
     }
 
     let { mapStart, mapEnd } = mapping;
     let startTime = (mapStart || (e => e.delta))(this._data[0]);
     let endTime = (mapEnd || (e => e.delta))(this._data[this._data.length - 1]);
@@ -512,17 +521,17 @@ AbstractCanvasGraph.prototype = {
    * Sets the selection bounds.
    * Use `dropCursor` to hide the cursor.
    *
    * @param object cursor
    *        The cursor's { x, y } position.
    */
   setCursor: function (cursor) {
     if (!cursor || cursor.x == null || cursor.y == null) {
-      throw "Invalid cursor coordinates";
+      throw new Error("Invalid cursor coordinates");
     }
     if (!this.isCursorDifferent(cursor)) {
       return;
     }
     this._cursor.x = cursor.x;
     this._cursor.y = cursor.y;
     this._shouldRedraw = true;
   },
@@ -560,29 +569,33 @@ AbstractCanvasGraph.prototype = {
 
   /**
    * Specifies if this graph's selection is different from another one.
    *
    * @param object other
    *        The other graph's selection, as { start, end } values.
    */
   isSelectionDifferent: function (other) {
-    if (!other) return true;
+    if (!other) {
+      return true;
+    }
     let current = this.getSelection();
     return current.start != other.start || current.end != other.end;
   },
 
   /**
    * Specifies if this graph's cursor is different from another one.
    *
    * @param object other
    *        The other graph's position, as { x, y } values.
    */
   isCursorDifferent: function (other) {
-    if (!other) return true;
+    if (!other) {
+      return true;
+    }
     let current = this.getCursor();
     return current.x != other.x || current.y != other.y;
   },
 
   /**
    * Gets the width of the current selection.
    * If no selection is available, 0 is returned.
    *
@@ -698,17 +711,18 @@ AbstractCanvasGraph.prototype = {
    * if the rendering is "dirty" and needs to be refreshed.
    */
   _shouldRedraw: false,
 
   /**
    * Animation frame callback, invoked on each tick of the refresh driver.
    */
   _onAnimationFrame: function () {
-    this._animationId = this._window.requestAnimationFrame(this._onAnimationFrame);
+    this._animationId =
+      this._window.requestAnimationFrame(this._onAnimationFrame);
     this._drawWidget();
   },
 
   /**
    * Redraws the widget when necessary. The actual graph is not refreshed
    * every time this function is called, only the cliphead, selection etc.
    */
   _drawWidget: function () {
@@ -722,17 +736,18 @@ AbstractCanvasGraph.prototype = {
       ctx.drawImage(this._cachedGraphImage, 0, 0, this._width, this._height);
     }
     if (this._cachedMaskImage) {
       ctx.globalCompositeOperation = "destination-out";
       ctx.drawImage(this._cachedMaskImage, 0, 0, this._width, this._height);
     }
     if (this._cachedBackgroundImage) {
       ctx.globalCompositeOperation = "destination-over";
-      ctx.drawImage(this._cachedBackgroundImage, 0, 0, this._width, this._height);
+      ctx.drawImage(this._cachedBackgroundImage, 0, 0,
+                    this._width, this._height);
     }
 
     // Revert to the original global composition operation.
     if (this._cachedMaskImage || this._cachedBackgroundImage) {
       ctx.globalCompositeOperation = "source-over";
     }
 
     if (this.hasCursor()) {
@@ -744,17 +759,18 @@ AbstractCanvasGraph.prototype = {
 
     this._shouldRedraw = false;
   },
 
   /**
    * Draws the cliphead, if available and necessary.
    */
   _drawCliphead: function () {
-    if (this._isHoveringSelectionContentsOrBoundaries() || this._isHoveringRegion()) {
+    if (this._isHoveringSelectionContentsOrBoundaries() ||
+        this._isHoveringRegion()) {
       return;
     }
 
     let ctx = this._ctx;
     ctx.lineWidth = this.clipheadLineWidth;
     ctx.strokeStyle = this.clipheadLineColor;
     ctx.beginPath();
     ctx.moveTo(this._cursor.x, 0);
@@ -837,45 +853,45 @@ AbstractCanvasGraph.prototype = {
   },
 
   /**
    * Checks whether the start handle of the selection is hovered.
    * @return boolean
    */
   _isHoveringStartBoundary: function () {
     if (!this.hasSelection() || !this.hasCursor()) {
-      return;
+      return false;
     }
     let { x } = this._cursor;
     let { start } = this._selection;
     let threshold = GRAPH_SELECTION_BOUNDARY_HOVER_THRESHOLD * this._pixelRatio;
     return Math.abs(start - x) < threshold;
   },
 
   /**
    * Checks whether the end handle of the selection is hovered.
    * @return boolean
    */
   _isHoveringEndBoundary: function () {
     if (!this.hasSelection() || !this.hasCursor()) {
-      return;
+      return false;
     }
     let { x } = this._cursor;
     let { end } = this._selection;
     let threshold = GRAPH_SELECTION_BOUNDARY_HOVER_THRESHOLD * this._pixelRatio;
     return Math.abs(end - x) < threshold;
   },
 
   /**
    * Checks whether the selection is hovered.
    * @return boolean
    */
   _isHoveringSelectionContents: function () {
     if (!this.hasSelection() || !this.hasCursor()) {
-      return;
+      return false;
     }
     let { x } = this._cursor;
     let { start, end } = this._selection;
     return (start < end && start < x && end > x) ||
            (start > end && end < x && start > x);
   },
 
   /**
@@ -933,17 +949,17 @@ AbstractCanvasGraph.prototype = {
     let x = (e.screenX - this._topWindow.screenX) - bb.p1.x;
     let y = (e.screenY - this._topWindow.screenY) - bb.p1.y;
 
     // Don't allow the event coordinates to be bigger than the canvas
     // or less than 0.
     let maxX = bb.p2.x - bb.p1.x;
     let maxY = bb.p3.y - bb.p1.y;
     let mouseX = Math.max(0, Math.min(x, maxX)) * this._pixelRatio;
-    let mouseY = Math.max(0, Math.min(x, maxY)) * this._pixelRatio;
+    let mouseY = Math.max(0, Math.min(y, maxY)) * this._pixelRatio;
 
     // The coordinates need to be modified with the current zoom level
     // to prevent them from being wrong.
     let zoom = getCurrentZoom(this._canvas);
     mouseX /= zoom;
     mouseY /= zoom;
 
     return {mouseX, mouseY};
@@ -964,17 +980,18 @@ AbstractCanvasGraph.prototype = {
       e.stopPropagation();
     }
 
     // If a mouseup happened outside the window and the current operation
     // is causing the selection to change, then end it.
     if (e.buttons == 0 && (this.hasSelectionInProgress() ||
                            resizer.margin != null ||
                            dragger.origin != null)) {
-      return this._onMouseUp();
+      this._onMouseUp();
+      return;
     }
 
     let {mouseX, mouseY} = this._getRelativeEventCoordinates(e);
     this._cursor.x = mouseX;
     this._cursor.y = mouseY;
 
     if (resizer.margin != null) {
       this._selection[resizer.margin] = mouseX;
@@ -1132,19 +1149,18 @@ AbstractCanvasGraph.prototype = {
     // If the selection is hovered, "zoom" towards or away the cursor,
     // by shrinking or growing the selection.
     if (this._isHoveringSelectionContentsOrBoundaries()) {
       let distStart = selection.start - focusX;
       let distEnd = selection.end - focusX;
       vector = e.detail * GRAPH_WHEEL_ZOOM_SENSITIVITY;
       selection.start = selection.start + distStart * vector;
       selection.end = selection.end + distEnd * vector;
-    }
-    // Otherwise, simply pan the selection towards the left or right.
-    else {
+    } else {
+      // Otherwise, simply pan the selection towards the left or right.
       let direction = 0;
       if (focusX > selection.end) {
         direction = Math.sign(focusX - selection.end);
       } else if (focusX < selection.start) {
         direction = Math.sign(focusX - selection.start);
       }
       vector = direction * e.detail * GRAPH_WHEEL_SCROLL_SENSITIVITY;
       selection.start -= vector;
@@ -1384,18 +1400,22 @@ function map(value, istart, istop, ostar
 }
 
 /**
  * Constrains a value to a range.
  * @param number value, min, max
  * @return number
  */
 function clamp(value, min, max) {
-  if (value < min) return min;
-  if (value > max) return max;
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
   return value;
 }
 
 exports.GraphCursor = GraphCursor;
 exports.GraphArea = GraphArea;
 exports.GraphAreaDragger = GraphAreaDragger;
 exports.GraphAreaResizer = GraphAreaResizer;
 exports.AbstractCanvasGraph = AbstractCanvasGraph;
--- a/devtools/client/shared/widgets/GraphsWorker.js
+++ b/devtools/client/shared/widgets/GraphsWorker.js
@@ -1,50 +1,51 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
+/* eslint-env worker */
+
 /**
  * Import `createTask` to communicate with `devtools/shared/worker`.
  */
 importScripts("resource://gre/modules/workers/require.js");
 const { createTask } = require("resource://devtools/shared/worker/helper.js");
 
 /**
  * @see LineGraphWidget.prototype.setDataFromTimestamps in Graphs.js
  * @param number id
  * @param array timestamps
  * @param number interval
  * @param number duration
  */
-createTask(self, "plotTimestampsGraph", function ({ timestamps, interval, duration }) {
+createTask(self, "plotTimestampsGraph", function ({ timestamps,
+                                                    interval, duration }) {
   let plottedData = plotTimestamps(timestamps, interval);
   let plottedMinMaxSum = getMinMaxAvg(plottedData, timestamps, duration);
 
   return { plottedData, plottedMinMaxSum };
 });
 
-
 /**
  * Gets the min, max and average of the values in an array.
  * @param array source
  * @param array timestamps
  * @param number duration
  * @return object
  */
 function getMinMaxAvg(source, timestamps, duration) {
-  let totalTicks = source.length;
   let totalFrames = timestamps.length;
   let maxValue = Number.MIN_SAFE_INTEGER;
   let minValue = Number.MAX_SAFE_INTEGER;
   // Calculate the average by counting how many frames occurred
   // in the duration of the recording, rather than average the frame points
-  // we have, as that weights higher FPS, as there'll be more timestamps for those
-  // values
+  // we have, as that weights higher FPS, as there'll be more timestamps for
+  // those values
   let avgValue = totalFrames / (duration / 1000);
 
   for (let { value } of source) {
     maxValue = Math.max(value, maxValue);
     minValue = Math.min(value, minValue);
   }
 
   return { minValue, maxValue, avgValue };
--- a/devtools/client/shared/widgets/LineGraphWidget.js
+++ b/devtools/client/shared/widgets/LineGraphWidget.js
@@ -1,31 +1,32 @@
 "use strict";
 
-const { Cc, Ci, Cu, Cr } = require("chrome");
-
 const { Task } = require("devtools/shared/task");
-const { ViewHelpers, Heritage } = require("devtools/client/shared/widgets/view-helpers");
+const { Heritage } = require("devtools/client/shared/widgets/view-helpers");
 const { AbstractCanvasGraph, CanvasGraphUtils } = require("devtools/client/shared/widgets/Graphs");
 const { LocalizationHelper } = require("devtools/client/shared/l10n");
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const L10N = new LocalizationHelper("chrome://devtools/locale/graphs.properties");
 
 // Line graph constants.
 
 const GRAPH_DAMPEN_VALUES_FACTOR = 0.85;
-const GRAPH_TOOLTIP_SAFE_BOUNDS = 8; // px
-const GRAPH_MIN_MAX_TOOLTIP_DISTANCE = 14; // px
+// px
+const GRAPH_TOOLTIP_SAFE_BOUNDS = 8;
+const GRAPH_MIN_MAX_TOOLTIP_DISTANCE = 14;
 
 const GRAPH_BACKGROUND_COLOR = "#0088cc";
-const GRAPH_STROKE_WIDTH = 1; // px
+// px
+const GRAPH_STROKE_WIDTH = 1;
 const GRAPH_STROKE_COLOR = "rgba(255,255,255,0.9)";
-const GRAPH_HELPER_LINES_DASH = [5]; // px
-const GRAPH_HELPER_LINES_WIDTH = 1; // px
+// px
+const GRAPH_HELPER_LINES_DASH = [5];
+const GRAPH_HELPER_LINES_WIDTH = 1;
 const GRAPH_MAXIMUM_LINE_COLOR = "rgba(255,255,255,0.4)";
 const GRAPH_AVERAGE_LINE_COLOR = "rgba(255,255,255,0.7)";
 const GRAPH_MINIMUM_LINE_COLOR = "rgba(255,255,255,0.9)";
 const GRAPH_BACKGROUND_GRADIENT_START = "rgba(255,255,255,0.25)";
 const GRAPH_BACKGROUND_GRADIENT_END = "rgba(255,255,255,0.0)";
 
 const GRAPH_CLIPHEAD_LINE_COLOR = "#fff";
 const GRAPH_SELECTION_LINE_COLOR = "#fff";
@@ -53,40 +54,46 @@ const GRAPH_REGION_STRIPES_COLOR = "rgba
  *     ...
  *     { delta: xn, value: yn }
  *   ]
  * where each item in the array represents a point in the graph.
  *
  * @param nsIDOMNode parent
  *        The parent node holding the graph.
  * @param object options [optional]
- *        `metric`: The metric displayed in the graph, e.g. "fps" or "bananas".
- *        `min`: Boolean whether to show the min tooltip/gutter/line (default: true)
- *        `max`: Boolean whether to show the max tooltip/gutter/line (default: true)
- *        `avg`: Boolean whether to show the avg tooltip/gutter/line (default: true)
+ *  `metric`: The metric displayed in the graph, e.g. "fps" or "bananas".
+ *  `min`: Boolean whether to show the min tooltip/gutter/line (default: true)
+ *  `max`: Boolean whether to show the max tooltip/gutter/line (default: true)
+ *  `avg`: Boolean whether to show the avg tooltip/gutter/line (default: true)
  */
 this.LineGraphWidget = function (parent, options = {}, ...args) {
   let { metric, min, max, avg } = options;
 
   this._showMin = min !== false;
   this._showMax = max !== false;
   this._showAvg = avg !== false;
 
   AbstractCanvasGraph.apply(this, [parent, "line-graph", ...args]);
 
   this.once("ready", () => {
     // Create all gutters and tooltips incase the showing of min/max/avg
     // are changed later
     this._gutter = this._createGutter();
     this._maxGutterLine = this._createGutterLine("maximum");
-    this._maxTooltip = this._createTooltip("maximum", "start", L10N.getStr("graphs.label.maximum"), metric);
+    this._maxTooltip = this._createTooltip(
+      "maximum", "start", L10N.getStr("graphs.label.maximum"), metric
+    );
     this._minGutterLine = this._createGutterLine("minimum");
-    this._minTooltip = this._createTooltip("minimum", "start", L10N.getStr("graphs.label.minimum"), metric);
+    this._minTooltip = this._createTooltip(
+      "minimum", "start", L10N.getStr("graphs.label.minimum"), metric
+    );
     this._avgGutterLine = this._createGutterLine("average");
-    this._avgTooltip = this._createTooltip("average", "end", L10N.getStr("graphs.label.average"), metric);
+    this._avgTooltip = this._createTooltip(
+      "average", "end", L10N.getStr("graphs.label.average"), metric
+    );
   });
 };
 
 LineGraphWidget.prototype = Heritage.extend(AbstractCanvasGraph.prototype, {
   backgroundColor: GRAPH_BACKGROUND_COLOR,
   backgroundGradientStart: GRAPH_BACKGROUND_GRADIENT_START,
   backgroundGradientEnd: GRAPH_BACKGROUND_GRADIENT_END,
   strokeColor: GRAPH_STROKE_COLOR,
@@ -171,27 +178,28 @@ LineGraphWidget.prototype = Heritage.ext
     let avgValue = 0;
 
     if (this._tempMinMaxSum) {
       maxValue = this._tempMinMaxSum.maxValue;
       minValue = this._tempMinMaxSum.minValue;
       avgValue = this._tempMinMaxSum.avgValue;
     } else {
       let sumValues = 0;
-      for (let { delta, value } of this._data) {
+      for (let { value } of this._data) {
         maxValue = Math.max(value, maxValue);
         minValue = Math.min(value, minValue);
         sumValues += value;
       }
       avgValue = sumValues / totalTicks;
     }
 
     let duration = this.dataDuration || lastTick;
     let dataScaleX = this.dataScaleX = width / (duration - this.dataOffsetX);
-    let dataScaleY = this.dataScaleY = height / maxValue * this.dampenValuesFactor;
+    let dataScaleY =
+      this.dataScaleY = height / maxValue * this.dampenValuesFactor;
 
     // Draw the background.
 
     ctx.fillStyle = this.backgroundColor;
     ctx.fillRect(0, 0, width, height);
 
     // Draw the graph.
 
@@ -284,19 +292,22 @@ LineGraphWidget.prototype = Heritage.ext
     this._maxTooltip.querySelector("[text=value]").textContent =
       L10N.numberWithDecimals(maxValue, 2);
     this._avgTooltip.querySelector("[text=value]").textContent =
       L10N.numberWithDecimals(avgValue, 2);
     this._minTooltip.querySelector("[text=value]").textContent =
       L10N.numberWithDecimals(minValue, 2);
 
     let bottom = height / this._pixelRatio;
-    let maxPosY = CanvasGraphUtils.map(maxValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
-    let avgPosY = CanvasGraphUtils.map(avgValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
-    let minPosY = CanvasGraphUtils.map(minValue * this.dampenValuesFactor, 0, maxValue, bottom, 0);
+    let maxPosY = CanvasGraphUtils.map(maxValue * this.dampenValuesFactor, 0,
+                                       maxValue, bottom, 0);
+    let avgPosY = CanvasGraphUtils.map(avgValue * this.dampenValuesFactor, 0,
+                                       maxValue, bottom, 0);
+    let minPosY = CanvasGraphUtils.map(minValue * this.dampenValuesFactor, 0,
+                                       maxValue, bottom, 0);
 
     let safeTop = GRAPH_TOOLTIP_SAFE_BOUNDS;
     let safeBottom = bottom - GRAPH_TOOLTIP_SAFE_BOUNDS;
 
     let maxTooltipTop = (this.withFixedTooltipPositions
       ? safeTop : CanvasGraphUtils.clamp(maxPosY, safeTop, safeBottom));
     let avgTooltipTop = (this.withFixedTooltipPositions
       ? safeTop : CanvasGraphUtils.clamp(avgPosY, safeTop, safeBottom));
@@ -311,20 +322,24 @@ LineGraphWidget.prototype = Heritage.ext
     this._avgGutterLine.style.top = avgPosY + "px";
     this._minGutterLine.style.top = minPosY + "px";
 
     this._maxTooltip.setAttribute("with-arrows", this.withTooltipArrows);
     this._avgTooltip.setAttribute("with-arrows", this.withTooltipArrows);
     this._minTooltip.setAttribute("with-arrows", this.withTooltipArrows);
 
     let distanceMinMax = Math.abs(maxTooltipTop - minTooltipTop);
-    this._maxTooltip.hidden = this._showMax === false || !totalTicks || distanceMinMax < GRAPH_MIN_MAX_TOOLTIP_DISTANCE;
+    this._maxTooltip.hidden = this._showMax === false
+                            || !totalTicks
+                            || distanceMinMax < GRAPH_MIN_MAX_TOOLTIP_DISTANCE;
     this._avgTooltip.hidden = this._showAvg === false || !totalTicks;
     this._minTooltip.hidden = this._showMin === false || !totalTicks;
-    this._gutter.hidden = (this._showMin === false && this._showAvg === false && this._showMax === false) || !totalTicks;
+    this._gutter.hidden = (this._showMin === false &&
+                           this._showAvg === false &&
+                           this._showMax === false) || !totalTicks;
 
     this._maxGutterLine.hidden = this._showMax === false;
     this._avgGutterLine.hidden = this._showAvg === false;
     this._minGutterLine.hidden = this._showMin === false;
   },
 
   /**
    * Creates the gutter node when constructing this graph.
--- a/devtools/client/shared/widgets/MdnDocsWidget.js
+++ b/devtools/client/shared/widgets/MdnDocsWidget.js
@@ -19,30 +19,30 @@
  *
  * - the MdnDocsWidget class, that manages and updates a tooltip
  * document whose content is taken from MDN. If you want to embed
  * the content in a tooltip, use this in conjunction with Tooltip.js.
  */
 
 "use strict";
 
-const {Cc, Cu, Ci} = require("chrome");
 const Services = require("Services");
 const Promise = require("promise");
 const {getCSSLexer} = require("devtools/shared/css-lexer");
 
 // Parameters for the XHR request
 // see https://developer.mozilla.org/en-US/docs/MDN/Kuma/API#Document_parameters
 const XHR_PARAMS = "?raw&macros";
 // URL for the XHR request
 var XHR_CSS_URL = "https://developer.mozilla.org/en-US/docs/Web/CSS/";
 
 // Parameters for the link to MDN in the tooltip, so
 // so we know which MDN visits come from this feature
-const PAGE_LINK_PARAMS = "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
+const PAGE_LINK_PARAMS =
+  "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default";
 // URL for the page link omits locale, so a locale-specific page will be loaded
 var PAGE_LINK_URL = "https://developer.mozilla.org/docs/Web/CSS/";
 exports.PAGE_LINK_URL = PAGE_LINK_URL;
 
 const BROWSER_WINDOW = "navigator:browser";
 
 const PROPERTY_NAME_COLOR = "theme-fg-color5";
 const PROPERTY_VALUE_COLOR = "theme-fg-color1";
@@ -99,21 +99,18 @@ function appendSyntaxHighlightedCSS(cssT
    * "ident" token to be part of a property value.
    *
    * If the symbol is ";", we will expect the next
    * "ident" token to be a property name.
    */
   function updateIdentClass(tokenText) {
     if (tokenText === ":") {
       identClass = PROPERTY_VALUE_COLOR;
-    }
-    else {
-      if (tokenText === ";") {
-        identClass = PROPERTY_NAME_COLOR;
-      }
+    } else if (tokenText === ";") {
+      identClass = PROPERTY_NAME_COLOR;
     }
   }
 
   /**
    * Create the appropriate node for this token type.
    *
    * If this token is a symbol, also update our expectations
    * for what the next "ident" token represents.
@@ -167,18 +164,17 @@ function getMdnPage(pageUrl) {
 
   xhr.open("GET", pageUrl);
   xhr.responseType = "document";
   xhr.send();
 
   function onLoaded(e) {
     if (xhr.status != 200) {
       deferred.reject({page: pageUrl, status: xhr.status});
-    }
-    else {
+    } else {
       deferred.resolve(xhr.responseXML);
     }
   }
 
   function onError(e) {
     deferred.reject({page: pageUrl, status: xhr.status});
   }
 
@@ -197,30 +193,28 @@ function getMdnPage(pageUrl) {
  * The promise is resolved with an object containing:
  * - summary: a short summary of the property
  * - syntax: some example syntax
  *
  * The promise is rejected with an error message if
  * we could not load the page.
  */
 function getCssDocs(cssProperty) {
-
   let deferred = Promise.defer();
   let pageUrl = XHR_CSS_URL + cssProperty + XHR_PARAMS;
 
   getMdnPage(pageUrl).then(parseDocsFromResponse, handleRejection);
 
   function parseDocsFromResponse(responseDocument) {
     let theDocs = {};
     theDocs.summary = getSummary(responseDocument);
     theDocs.syntax = getSyntax(responseDocument);
     if (theDocs.summary || theDocs.syntax) {
       deferred.resolve(theDocs);
-    }
-    else {
+    } else {
       deferred.reject("Couldn't find the docs in the page.");
     }
   }
 
   function handleRejection(e) {
     deferred.reject(e.status);
   }
 
@@ -241,17 +235,16 @@ exports.getCssDocs = getCssDocs;
  * After that, when the tooltip code needs to display docs for an item, it
  * asks the widget to retrieve the docs and update the document with them.
  *
  * @param {Document} tooltipDocument
  * A DOM document. The widget expects the document to have a particular
  * structure.
  */
 function MdnDocsWidget(tooltipDocument) {
-
   // fetch all the bits of the document that we will manipulate later
   this.elements = {
     heading: tooltipDocument.getElementById("property-name"),
     summary: tooltipDocument.getElementById("summary"),
     syntax: tooltipDocument.getElementById("syntax"),
     info: tooltipDocument.getElementById("property-info"),
     linkToMdn: tooltipDocument.getElementById("visit-mdn-page")
   };
@@ -291,30 +284,28 @@ MdnDocsWidget.prototype = {
    *
    * It returns immediately, so the caller can display the tooltip
    * without waiting for the asynch operation to complete.
    *
    * @param {string} propertyName
    * The name of the CSS property for which we need to display help.
    */
   loadCssDocs: function (propertyName) {
-
     /**
      * Do all the setup we can do synchronously, and get the document in
      * a state where it can be displayed while we are waiting for the
      * MDN docs content to be retrieved.
      */
-    function initializeDocument(propertyName) {
-
+    function initializeDocument(propName) {
       // set property name heading
-      elements.heading.textContent = propertyName;
+      elements.heading.textContent = propName;
 
       // set link target
       elements.linkToMdn.setAttribute("href",
-        PAGE_LINK_URL + propertyName + PAGE_LINK_PARAMS);
+        PAGE_LINK_URL + propName + PAGE_LINK_PARAMS);
 
       // clear docs summary and syntax
       elements.summary.textContent = "";
       while (elements.syntax.firstChild) {
         elements.syntax.firstChild.remove();
       }
 
       // reset the scroll position
@@ -341,29 +332,29 @@ MdnDocsWidget.prototype = {
     }
 
     /**
      * This is called if we failed to get the docs content.
      * Sets the content to contain an error message, and disables the throbber.
      */
     function gotError(error) {
       // show error message
-      elements.summary.textContent = l10n.strings.GetStringFromName("docsTooltip.loadDocsError");
+      elements.summary.textContent =
+        l10n.strings.GetStringFromName("docsTooltip.loadDocsError");
 
       // hide the throbber
       elements.info.classList.remove("devtools-throbber");
 
       // although gotError is called when there's an error, we have handled
       // the error, so call resolve not reject.
       deferred.resolve(this);
     }
 
     let deferred = Promise.defer();
     let elements = this.elements;
-    let doc = this.doc;
 
     initializeDocument(propertyName);
     getCssDocs(propertyName).then(finalizeDocument, gotError);
 
     return deferred.promise;
   },
 
   destroy: function () {
@@ -397,30 +388,33 @@ function isAllWhitespace(node) {
 
 /**
  * Test whether a node is a comment or whitespace node.
  *
  * @return {boolean}
  * True if the node is a comment node or is all whitespace, otherwise false.
  */
 function isIgnorable(node) {
-  return (node.nodeType == 8) || // A comment node
-         ((node.nodeType == 3) && isAllWhitespace(node)); // text node, all ws
+  // Comment nodes (8), text nodes (3) or whitespace
+  return (node.nodeType == 8) ||
+         ((node.nodeType == 3) && isAllWhitespace(node));
 }
 
 /**
  * Get the next node, skipping comments and whitespace.
  *
  * @return {node}
  * The next sibling node that is not a comment or whitespace, or null if
  * there isn't one.
  */
 function nodeAfter(sib) {
   while ((sib = sib.nextSibling)) {
-    if (!isIgnorable(sib)) return sib;
+    if (!isIgnorable(sib)) {
+      return sib;
+    }
   }
   return null;
 }
 
 /**
  * Test whether the argument `node` is a node whose tag is `tagName`.
  *
  * @param {node} node
@@ -482,34 +476,31 @@ function getSummary(mdnDocument) {
  *
  * @param {Document} mdnDocument
  * The document in which to look for the "syntax" section.
  *
  * @return {string}
  * The syntax section as a string, or null if it could not be found.
  */
 function getSyntax(mdnDocument) {
-
   let syntax = mdnDocument.getElementById("Syntax");
   if (!hasTagName(syntax, "H2")) {
     return null;
   }
 
   let firstParagraph = nodeAfter(syntax);
   if (!hasTagName(firstParagraph, "PRE")) {
     return null;
   }
 
   let secondParagraph = nodeAfter(firstParagraph);
   if (hasTagName(secondParagraph, "PRE")) {
     return secondParagraph.textContent;
   }
-  else {
-    return firstParagraph.textContent;
-  }
+  return firstParagraph.textContent;
 }
 
 /**
  * Use a different URL for CSS docs pages. Used only for testing.
  *
  * @param {string} baseUrl
  * The baseURL to use.
  */
--- a/devtools/client/shared/widgets/MountainGraphWidget.js
+++ b/devtools/client/shared/widgets/MountainGraphWidget.js
@@ -1,26 +1,24 @@
 "use strict";
 
-const { Cc, Ci, Cu, Cr } = require("chrome");
-
 const { Heritage } = require("devtools/client/shared/widgets/view-helpers");
-const { AbstractCanvasGraph, CanvasGraphUtils } = require("devtools/client/shared/widgets/Graphs");
-
-const HTML_NS = "http://www.w3.org/1999/xhtml";
+const { AbstractCanvasGraph } = require("devtools/client/shared/widgets/Graphs");
 
 // Bar graph constants.
 
 const GRAPH_DAMPEN_VALUES_FACTOR = 0.9;
 
 const GRAPH_BACKGROUND_COLOR = "#ddd";
-const GRAPH_STROKE_WIDTH = 1; // px
+// px
+const GRAPH_STROKE_WIDTH = 1;
 const GRAPH_STROKE_COLOR = "rgba(255,255,255,0.9)";
-const GRAPH_HELPER_LINES_DASH = [5]; // px
-const GRAPH_HELPER_LINES_WIDTH = 1; // px
+// px
+const GRAPH_HELPER_LINES_DASH = [5];
+const GRAPH_HELPER_LINES_WIDTH = 1;
 
 const GRAPH_CLIPHEAD_LINE_COLOR = "#fff";
 const GRAPH_SELECTION_LINE_COLOR = "#fff";
 const GRAPH_SELECTION_BACKGROUND_COLOR = "rgba(44,187,15,0.25)";
 const GRAPH_SELECTION_STRIPES_COLOR = "rgba(255,255,255,0.1)";
 const GRAPH_REGION_BACKGROUND_COLOR = "transparent";
 const GRAPH_REGION_STRIPES_COLOR = "rgba(237,38,85,0.2)";
 
@@ -112,17 +110,18 @@ MountainGraphWidget.prototype = Heritage
   },
 
   /**
    * Renders the graph's data source.
    * @see AbstractCanvasGraph.prototype.buildGraphImage
    */
   buildGraphImage: function () {
     if (!this.format || !this.format.length) {
-      throw "The graph format traits are mandatory to style the data source.";
+      throw new Error("The graph format traits are mandatory to style " +
+                      "the data source.");
     }
     let { canvas, ctx } = this._getNamedCanvas("mountain-graph-data");
     let width = this._width;
     let height = this._height;
 
     let totalSections = this.format.length;
     let totalTicks = this._data.length;
     let firstTick = totalTicks ? this._data[0].delta : 0;
--- a/devtools/client/shared/widgets/Spectrum.js
+++ b/devtools/client/shared/widgets/Spectrum.js
@@ -161,17 +161,18 @@ Spectrum.draggable = function (element, 
     e.stopPropagation();
     e.preventDefault();
   }
 
   function move(e) {
     if (dragging) {
       if (e.buttons === 0) {
         // The button is no longer pressed but we did not get a mouseup event.
-        return stop();
+        stop();
+        return;
       }
       let pageX = e.pageX;
       let pageY = e.pageY;
 
       let dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
       let dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
 
       onmove.apply(element, [dragX, dragY]);
--- a/devtools/client/shared/widgets/TableWidget.js
+++ b/devtools/client/shared/widgets/TableWidget.js
@@ -1,14 +1,14 @@
 /* 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 {Ci, Cu} = require("chrome");
+const {Ci} = require("chrome");
 const EventEmitter = require("devtools/shared/event-emitter");
 loader.lazyRequireGetter(this, "setNamedTimeout",
   "devtools/client/shared/widgets/view-helpers", true);
 loader.lazyRequireGetter(this, "clearNamedTimeout",
   "devtools/client/shared/widgets/view-helpers", true);
 
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const HTML_NS = "http://www.w3.org/1999/xhtml";
--- a/devtools/client/shared/widgets/Tooltip.js
+++ b/devtools/client/shared/widgets/Tooltip.js
@@ -488,17 +488,19 @@ Tooltip.prototype = {
     // If a toolbox was provided, link it to the vview
     if (toolbox) {
       widget.toolbox = toolbox;
     }
 
     // Analyzing state history isn't useful with transient object inspectors.
     widget.commitHierarchy = () => {};
 
-    for (let e in relayEvents) widget.on(e, relayEvents[e]);
+    for (let e in relayEvents) {
+      widget.on(e, relayEvents[e]);
+    }
     VariablesViewController.attach(widget, controllerOptions);
 
     // Some of the view options are allowed to change between uses.
     widget.searchPlaceholder = viewOptions.searchPlaceholder;
     widget.searchEnabled = viewOptions.searchEnabled;
 
     // Use the object actor's grip to display it as a variable in the widget.
     // The controller options are allowed to change between uses.
@@ -512,17 +514,17 @@ Tooltip.prototype = {
   /**
    * Uses the provided inspectorFront's getImageDataFromURL method to resolve
    * the relative URL on the server-side, in the page context, and then sets the
    * tooltip content with the resulting image just like |setImageContent| does.
    * @return a promise that resolves when the image is shown in the tooltip or
    * resolves when the broken image tooltip content is ready, but never rejects.
    */
   setRelativeImageContent: Task.async(function* (imageUrl, inspectorFront,
-                                                maxDim) {
+                                                 maxDim) {
     if (imageUrl.startsWith("data:")) {
       // If the imageUrl already is a data-url, save ourselves a round-trip
       this.setImageContent(imageUrl, {maxDim: maxDim});
     } else if (inspectorFront) {
       try {
         let {data, size} = yield inspectorFront.getImageDataFromURL(imageUrl,
                                                                     maxDim);
         size.maxDim = maxDim;
@@ -534,17 +536,19 @@ Tooltip.prototype = {
     }
   }),
 
   /**
    * Fill the tooltip with a message explaining the the image is missing
    */
   setBrokenImageContent: function () {
     this.setTextContent({
-      messages: [l10n.strings.GetStringFromName("previewTooltip.image.brokenImage")]
+      messages: [
+        l10n.strings.GetStringFromName("previewTooltip.image.brokenImage")
+      ]
     });
   },
 
   /**
    * Fill the tooltip with an image and add the image dimension at the bottom.
    *
    * Only use this for absolute URLs that can be queried from the devtools
    * client-side. For relative URLs, use |setRelativeImageContent|.
@@ -733,17 +737,16 @@ Tooltip.prototype = {
   setFilterContent: function (filter) {
     let dimensions = {width: "500", height: "200"};
     let panel = this.panel;
 
     return this.setIFrameContent(dimensions, FILTER_FRAME).then(onLoaded);
 
     function onLoaded(iframe) {
       let win = iframe.contentWindow.wrappedJSObject;
-      let doc = win.document.documentElement;
       let def = promise.defer();
       let container = win.document.getElementById("container");
       let widget = new CSSFilterEditorWidget(container, filter);
 
       // Resolve to the widget instance whenever the popup becomes visible
       if (panel.state === "open") {
         def.resolve(widget);
       } else {
@@ -1003,17 +1006,18 @@ function SwatchColorPickerTooltip(doc) {
   // resolves to the spectrum instance
   this.spectrum = this.tooltip.setColorPickerContent([0, 0, 0, 1]);
   this._onSpectrumColorChange = this._onSpectrumColorChange.bind(this);
   this._openEyeDropper = this._openEyeDropper.bind(this);
 }
 
 module.exports.SwatchColorPickerTooltip = SwatchColorPickerTooltip;
 
-SwatchColorPickerTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, {
+SwatchColorPickerTooltip.prototype =
+Heritage.extend(SwatchBasedEditorTooltip.prototype, {
   /**
    * Overriding the SwatchBasedEditorTooltip.show function to set spectrum's
    * color.
    */
   show: function () {
     // Call then parent class' show function
     SwatchBasedEditorTooltip.prototype.show.call(this);
     // Then set spectrum's color and listen to color changes to preview them
@@ -1282,18 +1286,19 @@ EventTooltip.prototype = {
       }
 
       let {editor, handler} = eventEditors;
 
       let iframe = doc.createElement("iframe");
       iframe.setAttribute("style", "width:100%;");
 
       editor.appendTo(content, iframe).then(() => {
+        /* eslint-disable camelcase */
         let tidied = beautify.js(handler, { indent_size: 2 });
-
+        /* eslint-enable */
         editor.setText(tidied);
 
         eventEditors.appended = true;
 
         let container = header.parentElement.getBoundingClientRect();
         if (header.getBoundingClientRect().top < container.top) {
           header.scrollIntoView(true);
         } else if (content.getBoundingClientRect().bottom > container.bottom) {
@@ -1330,17 +1335,19 @@ EventTooltip.prototype = {
           line = matches[2];
         }
 
         let item = DebuggerView.Sources.getItemForAttachment(
           a => a.source.url === uri
         );
         if (item) {
           let actor = item.attachment.source.actor;
-          DebuggerView.setEditorLocation(actor, line, {noDebug: true}).then(() => {
+          DebuggerView.setEditorLocation(
+            actor, line, {noDebug: true}
+          ).then(() => {
             if (dom0) {
               let text = DebuggerView.editor.getText();
               let index = text.indexOf(searchString);
               let lastIndex = text.lastIndexOf(searchString);
 
               // To avoid confusion we only search for DOM0 event handlers when
               // there is only one possible match in the file.
               if (index !== -1 && index === lastIndex) {
@@ -1415,17 +1422,18 @@ function SwatchCubicBezierTooltip(doc) {
   // Creating a cubic-bezier instance.
   // this.widget will always be a promise that resolves to the widget instance
   this.widget = this.tooltip.setCubicBezierContent([0, 0, 1, 1]);
   this._onUpdate = this._onUpdate.bind(this);
 }
 
 module.exports.SwatchCubicBezierTooltip = SwatchCubicBezierTooltip;
 
-SwatchCubicBezierTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, {
+SwatchCubicBezierTooltip.prototype =
+Heritage.extend(SwatchBasedEditorTooltip.prototype, {
   /**
    * Overriding the SwatchBasedEditorTooltip.show function to set the cubic
    * bezier curve in the widget
    */
   show: function () {
     // Call the parent class' show function
     SwatchBasedEditorTooltip.prototype.show.call(this);
     // Then set the curve and listen to changes to preview them
@@ -1512,17 +1520,18 @@ function SwatchFilterTooltip(doc) {
   // Creating a filter editor instance.
   // this.widget will always be a promise that resolves to the widget instance
   this.widget = this.tooltip.setFilterContent("none");
   this._onUpdate = this._onUpdate.bind(this);
 }
 
 exports.SwatchFilterTooltip = SwatchFilterTooltip;
 
-SwatchFilterTooltip.prototype = Heritage.extend(SwatchBasedEditorTooltip.prototype, {
+SwatchFilterTooltip.prototype =
+Heritage.extend(SwatchBasedEditorTooltip.prototype, {
   show: function () {
     // Call the parent class' show function
     SwatchBasedEditorTooltip.prototype.show.call(this);
     // Then set the filter value and listen to changes to preview them
     if (this.activeSwatch) {
       this.currentFilterValue = this.activeSwatch.nextSibling;
       this.widget.then(widget => {
         widget.off("updated", this._onUpdate);
--- a/devtools/client/shared/widgets/view-helpers.js
+++ b/devtools/client/shared/widgets/view-helpers.js
@@ -1,201 +1,205 @@
 /* -*- 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/. */
 "use strict";
 
 const DevToolsUtils = require("devtools/shared/DevToolsUtils");
-const { Ci } = require("chrome");
+const { Cu, Ci } = require("chrome");
+let { XPCOMUtils } = Cu.import("resource://gre/modules/XPCOMUtils.jsm", {});
 
 const PANE_APPEARANCE_DELAY = 50;
 const PAGE_SIZE_ITEM_COUNT_RATIO = 5;
 const WIDGET_FOCUSABLE_NODES = new Set(["vbox", "hbox"]);
 
 /**
  * Inheritance helpers from the addon SDK's core/heritage.
  * Remove these when all devtools are loadered.
  */
 exports.Heritage = {
   /**
    * @see extend in sdk/core/heritage.
    */
-  extend: function (aPrototype, aProperties = {}) {
-    return Object.create(aPrototype, this.getOwnPropertyDescriptors(aProperties));
+  extend: function (prototype, properties = {}) {
+    return Object.create(prototype, this.getOwnPropertyDescriptors(properties));
   },
 
   /**
    * @see getOwnPropertyDescriptors in sdk/core/heritage.
    */
-  getOwnPropertyDescriptors: function (aObject) {
-    return Object.getOwnPropertyNames(aObject).reduce((aDescriptor, aName) => {
-      aDescriptor[aName] = Object.getOwnPropertyDescriptor(aObject, aName);
-      return aDescriptor;
+  getOwnPropertyDescriptors: function (object) {
+    return Object.getOwnPropertyNames(object).reduce((descriptor, name) => {
+      descriptor[name] = Object.getOwnPropertyDescriptor(object, name);
+      return descriptor;
     }, {});
   }
 };
 
 /**
  * Helper for draining a rapid succession of events and invoking a callback
  * once everything settles down.
  *
- * @param string aId
+ * @param string id
  *        A string identifier for the named timeout.
- * @param number aWait
+ * @param number wait
  *        The amount of milliseconds to wait after no more events are fired.
- * @param function aCallback
+ * @param function callback
  *        Invoked when no more events are fired after the specified time.
  */
-const setNamedTimeout = function setNamedTimeout(aId, aWait, aCallback) {
-  clearNamedTimeout(aId);
+const setNamedTimeout = function setNamedTimeout(id, wait, callback) {
+  clearNamedTimeout(id);
 
-  namedTimeoutsStore.set(aId, setTimeout(() =>
-    namedTimeoutsStore.delete(aId) && aCallback(), aWait));
+  namedTimeoutsStore.set(id, setTimeout(() =>
+    namedTimeoutsStore.delete(id) && callback(), wait));
 };
 exports.setNamedTimeout = setNamedTimeout;
 
 /**
  * Clears a named timeout.
  * @see setNamedTimeout
  *
- * @param string aId
+ * @param string id
  *        A string identifier for the named timeout.
  */
-const clearNamedTimeout = function clearNamedTimeout(aId) {
+const clearNamedTimeout = function clearNamedTimeout(id) {
   if (!namedTimeoutsStore) {
     return;
   }
-  clearTimeout(namedTimeoutsStore.get(aId));
-  namedTimeoutsStore.delete(aId);
+  clearTimeout(namedTimeoutsStore.get(id));
+  namedTimeoutsStore.delete(id);
 };
 exports.clearNamedTimeout = clearNamedTimeout;
 
 /**
  * Same as `setNamedTimeout`, but invokes the callback only if the provided
  * predicate function returns true. Otherwise, the timeout is re-triggered.
  *
- * @param string aId
+ * @param string id
  *        A string identifier for the conditional timeout.
- * @param number aWait
+ * @param number wait
  *        The amount of milliseconds to wait after no more events are fired.
- * @param function aPredicate
+ * @param function predicate
  *        The predicate function used to determine whether the timeout restarts.
- * @param function aCallback
+ * @param function callback
  *        Invoked when no more events are fired after the specified time, and
  *        the provided predicate function returns true.
  */
-const setConditionalTimeout = function setConditionalTimeout(aId, aWait, aPredicate, aCallback) {
-  setNamedTimeout(aId, aWait, function maybeCallback() {
-    if (aPredicate()) {
-      aCallback();
+const setConditionalTimeout = function setConditionalTimeout(id, wait,
+                                                             predicate,
+                                                             callback) {
+  setNamedTimeout(id, wait, function maybeCallback() {
+    if (predicate()) {
+      callback();
       return;
     }
-    setConditionalTimeout(aId, aWait, aPredicate, aCallback);
+    setConditionalTimeout(id, wait, predicate, callback);
   });
 };
 exports.setConditionalTimeout = setConditionalTimeout;
 
 /**
  * Clears a conditional timeout.
  * @see setConditionalTimeout
  *
- * @param string aId
+ * @param string id
  *        A string identifier for the conditional timeout.
  */
-const clearConditionalTimeout = function clearConditionalTimeout(aId) {
-  clearNamedTimeout(aId);
+const clearConditionalTimeout = function clearConditionalTimeout(id) {
+  clearNamedTimeout(id);
 };
 exports.clearConditionalTimeout = clearConditionalTimeout;
 
 loader.lazyGetter(this, "namedTimeoutsStore", () => new Map());
 
 /**
  * Helpers for creating and messaging between UI components.
  */
 const ViewHelpers = exports.ViewHelpers = {
   /**
    * Convenience method, dispatching a custom event.
    *
-   * @param nsIDOMNode aTarget
+   * @param nsIDOMNode target
    *        A custom target element to dispatch the event from.
-   * @param string aType
+   * @param string type
    *        The name of the event.
-   * @param any aDetail
+   * @param any detail
    *        The data passed when initializing the event.
    * @return boolean
    *         True if the event was cancelled or a registered handler
    *         called preventDefault.
    */
-  dispatchEvent: function (aTarget, aType, aDetail) {
-    if (!(aTarget instanceof Ci.nsIDOMNode)) {
-      return true; // Event cancelled.
+  dispatchEvent: function (target, type, detail) {
+    if (!(target instanceof Ci.nsIDOMNode)) {
+      // Event cancelled.
+      return true;
     }
-    let document = aTarget.ownerDocument || aTarget;
-    let dispatcher = aTarget.ownerDocument ? aTarget : document.documentElement;
+    let document = target.ownerDocument || target;
+    let dispatcher = target.ownerDocument ? target : document.documentElement;
 
     let event = document.createEvent("CustomEvent");
-    event.initCustomEvent(aType, true, true, aDetail);
+    event.initCustomEvent(type, true, true, detail);
     return dispatcher.dispatchEvent(event);
   },
 
   /**
    * Helper delegating some of the DOM attribute methods of a node to a widget.
    *
-   * @param object aWidget
+   * @param object widget
    *        The widget to assign the methods to.
-   * @param nsIDOMNode aNode
+   * @param nsIDOMNode node
    *        A node to delegate the methods to.
    */
-  delegateWidgetAttributeMethods: function (aWidget, aNode) {
-    aWidget.getAttribute =
-      aWidget.getAttribute || aNode.getAttribute.bind(aNode);
-    aWidget.setAttribute =
-      aWidget.setAttribute || aNode.setAttribute.bind(aNode);
-    aWidget.removeAttribute =
-      aWidget.removeAttribute || aNode.removeAttribute.bind(aNode);
+  delegateWidgetAttributeMethods: function (widget, node) {
+    widget.getAttribute =
+      widget.getAttribute || node.getAttribute.bind(node);
+    widget.setAttribute =
+      widget.setAttribute || node.setAttribute.bind(node);
+    widget.removeAttribute =
+      widget.removeAttribute || node.removeAttribute.bind(node);
   },
 
   /**
    * Helper delegating some of the DOM event methods of a node to a widget.
    *
-   * @param object aWidget
+   * @param object widget
    *        The widget to assign the methods to.
-   * @param nsIDOMNode aNode
+   * @param nsIDOMNode node
    *        A node to delegate the methods to.
    */
-  delegateWidgetEventMethods: function (aWidget, aNode) {
-    aWidget.addEventListener =
-      aWidget.addEventListener || aNode.addEventListener.bind(aNode);
-    aWidget.removeEventListener =
-      aWidget.removeEventListener || aNode.removeEventListener.bind(aNode);
+  delegateWidgetEventMethods: function (widget, node) {
+    widget.addEventListener =
+      widget.addEventListener || node.addEventListener.bind(node);
+    widget.removeEventListener =
+      widget.removeEventListener || node.removeEventListener.bind(node);
   },
 
   /**
    * Checks if the specified object looks like it's been decorated by an
    * event emitter.
    *
    * @return boolean
    *         True if it looks, walks and quacks like an event emitter.
    */
-  isEventEmitter: function (aObject) {
-    return aObject && aObject.on && aObject.off && aObject.once && aObject.emit;
+  isEventEmitter: function (object) {
+    return object && object.on && object.off && object.once && object.emit;
   },
 
   /**
    * Checks if the specified object is an instance of a DOM node.
    *
    * @return boolean
    *         True if it's a node, false otherwise.
    */
-  isNode: function (aObject) {
-    return aObject instanceof Ci.nsIDOMNode ||
-           aObject instanceof Ci.nsIDOMElement ||
-           aObject instanceof Ci.nsIDOMDocumentFragment;
+  isNode: function (object) {
+    return object instanceof Ci.nsIDOMNode ||
+           object instanceof Ci.nsIDOMElement ||
+           object instanceof Ci.nsIDOMDocumentFragment;
   },
 
   /**
    * Prevents event propagation when navigation keys are pressed.
    *
    * @param Event e
    *        The event to be prevented.
    */
@@ -213,88 +217,93 @@ const ViewHelpers = exports.ViewHelpers 
         e.stopPropagation();
     }
   },
 
   /**
    * Sets a toggled pane hidden or visible. The pane can either be displayed on
    * the side (right or left depending on the locale) or at the bottom.
    *
-   * @param object aFlags
+   * @param object flags
    *        An object containing some of the following properties:
    *        - visible: true if the pane should be shown, false to hide
    *        - animated: true to display an animation on toggle
    *        - delayed: true to wait a few cycles before toggle
    *        - callback: a function to invoke when the toggle finishes
-   * @param nsIDOMNode aPane
+   * @param nsIDOMNode pane
    *        The element representing the pane to toggle.
    */
-  togglePane: function (aFlags, aPane) {
+  togglePane: function (flags, pane) {
     // Make sure a pane is actually available first.
-    if (!aPane) {
+    if (!pane) {
       return;
     }
 
     // Hiding is always handled via margins, not the hidden attribute.
-    aPane.removeAttribute("hidden");
+    pane.removeAttribute("hidden");
 
     // Add a class to the pane to handle min-widths, margins and animations.
-    aPane.classList.add("generic-toggled-pane");
+    pane.classList.add("generic-toggled-pane");
 
     // Avoid useless toggles.
-    if (aFlags.visible == !aPane.hasAttribute("pane-collapsed")) {
-      if (aFlags.callback) aFlags.callback();
+    if (flags.visible == !pane.hasAttribute("pane-collapsed")) {
+      if (flags.callback) {
+        flags.callback();
+      }
       return;
     }
 
     // The "animated" attributes enables animated toggles (slide in-out).
-    if (aFlags.animated) {
-      aPane.setAttribute("animated", "");
+    if (flags.animated) {
+      pane.setAttribute("animated", "");
     } else {
-      aPane.removeAttribute("animated");
+      pane.removeAttribute("animated");
     }
 
     // Computes and sets the pane margins in order to hide or show it.
     let doToggle = () => {
       // Negative margins are applied to "right" and "left" to support RTL and
       // LTR directions, as well as to "bottom" to support vertical layouts.
       // Unnecessary negative margins are forced to 0 via CSS in widgets.css.
-      if (aFlags.visible) {
-        aPane.style.marginLeft = "0";
-        aPane.style.marginRight = "0";
-        aPane.style.marginBottom = "0";
-        aPane.removeAttribute("pane-collapsed");
+      if (flags.visible) {
+        pane.style.marginLeft = "0";
+        pane.style.marginRight = "0";
+        pane.style.marginBottom = "0";
+        pane.removeAttribute("pane-collapsed");
       } else {
-        let width = Math.floor(aPane.getAttribute("width")) + 1;
-        let height = Math.floor(aPane.getAttribute("height")) + 1;
-        aPane.style.marginLeft = -width + "px";
-        aPane.style.marginRight = -width + "px";
-        aPane.style.marginBottom = -height + "px";
-        aPane.setAttribute("pane-collapsed", "");
+        let width = Math.floor(pane.getAttribute("width")) + 1;
+        let height = Math.floor(pane.getAttribute("height")) + 1;
+        pane.style.marginLeft = -width + "px";
+        pane.style.marginRight = -width + "px";
+        pane.style.marginBottom = -height + "px";
+        pane.setAttribute("pane-collapsed", "");
       }
 
       // Wait for the animation to end before calling afterToggle()
-      if (aFlags.animated) {
-        aPane.addEventListener("transitionend", function onEvent() {
-          aPane.removeEventListener("transitionend", onEvent, false);
+      if (flags.animated) {
+        pane.addEventListener("transitionend", function onEvent() {
+          pane.removeEventListener("transitionend", onEvent, false);
           // Prevent unwanted transitions: if the panel is hidden and the layout
           // changes margins will be updated and the panel will pop out.
-          aPane.removeAttribute("animated");
-          if (aFlags.callback) aFlags.callback();
+          pane.removeAttribute("animated");
+          if (flags.callback) {
+            flags.callback();
+          }
         }, false);
-      } else {
+      } else if (flags.callback) {
         // Invoke the callback immediately since there's no transition.
-        if (aFlags.callback) aFlags.callback();
+        flags.callback();
       }
     };
 
     // Sometimes it's useful delaying the toggle a few ticks to ensure
     // a smoother slide in-out animation.
-    if (aFlags.delayed) {
-      aPane.ownerDocument.defaultView.setTimeout(doToggle, PANE_APPEARANCE_DELAY);
+    if (flags.delayed) {
+      pane.ownerDocument.defaultView.setTimeout(doToggle,
+                                                PANE_APPEARANCE_DELAY);
     } else {
       doToggle();
     }
   }
 };
 
 /**
  * A generic Item is used to describe children present in a Widget.
@@ -303,123 +312,129 @@ const ViewHelpers = exports.ViewHelpers 
  * characteristics, like a `value` and an `attachment`.
  *
  * The characteristics are optional, and their meaning is entirely up to you.
  * - The `value` should be a string, passed as an argument.
  * - The `attachment` is any kind of primitive or object, passed as an argument.
  *
  * Iterable via "for (let childItem of parentItem) { }".
  *
- * @param object aOwnerView
+ * @param object ownerView
  *        The owner view creating this item.
- * @param nsIDOMNode aElement
+ * @param nsIDOMNode element
  *        A prebuilt node to be wrapped.
- * @param string aValue
+ * @param string value
  *        A string identifying the node.
- * @param any aAttachment
+ * @param any attachment
  *        Some attached primitive/object.
  */
-function Item(aOwnerView, aElement, aValue, aAttachment) {
-  this.ownerView = aOwnerView;
-  this.attachment = aAttachment;
-  this._value = aValue + "";
-  this._prebuiltNode = aElement;
+function Item(ownerView, element, value, attachment) {
+  this.ownerView = ownerView;
+  this.attachment = attachment;
+  this._value = value + "";
+  this._prebuiltNode = element;
 }
 
 Item.prototype = {
-  get value() { return this._value; },
-  get target() { return this._target; },
-  get prebuiltNode() { return this._prebuiltNode; },
+  get value() {
+    return this._value;
+  },
+  get target() {
+    return this._target;
+  },
+  get prebuiltNode() {
+    return this._prebuiltNode;
+  },
 
   /**
    * Immediately appends a child item to this item.
    *
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        An nsIDOMNode representing the child element to append.
-   * @param object aOptions [optional]
+   * @param object options [optional]
    *        Additional options or flags supported by this operation:
    *          - attachment: some attached primitive/object for the item
    *          - attributes: a batch of attributes set to the displayed element
    *          - finalize: function invoked when the child item is removed
    * @return Item
    *         The item associated with the displayed element.
    */
-  append: function (aElement, aOptions = {}) {
-    let item = new Item(this, aElement, "", aOptions.attachment);
+  append: function (element, options = {}) {
+    let item = new Item(this, element, "", options.attachment);
 
     // Entangle the item with the newly inserted child node.
     // Make sure this is done with the value returned by appendChild(),
     // to avoid storing a potential DocumentFragment.
-    this._entangleItem(item, this._target.appendChild(aElement));
+    this._entangleItem(item, this._target.appendChild(element));
 
     // Handle any additional options after entangling the item.
-    if (aOptions.attributes) {
-      aOptions.attributes.forEach(e => item._target.setAttribute(e[0], e[1]));
+    if (options.attributes) {
+      options.attributes.forEach(e => item._target.setAttribute(e[0], e[1]));
     }
-    if (aOptions.finalize) {
-      item.finalize = aOptions.finalize;
+    if (options.finalize) {
+      item.finalize = options.finalize;
     }
 
     // Return the item associated with the displayed element.
     return item;
   },
 
   /**
    * Immediately removes the specified child item from this item.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item associated with the element to remove.
    */
-  remove: function (aItem) {
-    if (!aItem) {
+  remove: function (item) {
+    if (!item) {
       return;
     }
-    this._target.removeChild(aItem._target);
-    this._untangleItem(aItem);
+    this._target.removeChild(item._target);
+    this._untangleItem(item);
   },
 
   /**
    * Entangles an item (model) with a displayed node element (view).
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        The element displaying the item.
    */
-  _entangleItem: function (aItem, aElement) {
-    this._itemsByElement.set(aElement, aItem);
-    aItem._target = aElement;
+  _entangleItem: function (item, element) {
+    this._itemsByElement.set(element, item);
+    item._target = element;
   },
 
   /**
    * Untangles an item (model) from a displayed node element (view).
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
    */
-  _untangleItem: function (aItem) {
-    if (aItem.finalize) {
-      aItem.finalize(aItem);
+  _untangleItem: function (item) {
+    if (item.finalize) {
+      item.finalize(item);
     }
-    for (let childItem of aItem) {
-      aItem.remove(childItem);
+    for (let childItem of item) {
+      item.remove(childItem);
     }
 
-    this._unlinkItem(aItem);
-    aItem._target = null;
+    this._unlinkItem(item);
+    item._target = null;
   },
 
   /**
    * Deletes an item from the its parent's storage maps.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
    */
-  _unlinkItem: function (aItem) {
-    this._itemsByElement.delete(aItem._target);
+  _unlinkItem: function (item) {
+    this._itemsByElement.delete(item._target);
   },
 
   /**
    * Returns a string representing the object.
    * Avoid using `toString` to avoid accidental JSONification.
    * @return string
    */
   stringify: function () {
@@ -435,83 +450,89 @@ Item.prototype = {
   _target: null,
   _prebuiltNode: null,
   finalize: null,
   attachment: null
 };
 
 // Creating maps thousands of times for widgets with a large number of children
 // fills up a lot of memory. Make sure these are instantiated only if needed.
-DevToolsUtils.defineLazyPrototypeGetter(Item.prototype, "_itemsByElement", () => new Map());
+DevToolsUtils.defineLazyPrototypeGetter(Item.prototype, "_itemsByElement",
+                                        () => new Map());
 
 /**
  * Some generic Widget methods handling Item instances.
  * Iterable via "for (let childItem of wrappedView) { }".
  *
  * Usage:
  *   function MyView() {
  *     this.widget = new MyWidget(document.querySelector(".my-node"));
  *   }
  *
  *   MyView.prototype = Heritage.extend(WidgetMethods, {
  *     myMethod: function() {},
  *     ...
  *   });
  *
  * See https://gist.github.com/victorporof/5749386 for more details.
- * The devtools/shared/widgets/SimpleListWidget.jsm is an implementation example.
+ * The devtools/shared/widgets/SimpleListWidget.jsm is an implementation
+ * example.
  *
  * Language:
  *   - An "item" is an instance of an Item.
  *   - An "element" or "node" is a nsIDOMNode.
  *
- * The supplied widget can be any object implementing the following methods:
- *   - function:nsIDOMNode insertItemAt(aIndex:number, aNode:nsIDOMNode, aValue:string)
+ * The supplied widget can be any object implementing the following
+ * methods:
+ *   - function:nsIDOMNode insertItemAt(aIndex:number, aNode:nsIDOMNode,
+ *                                      aValue:string)
  *   - function:nsIDOMNode getItemAtIndex(aIndex:number)
  *   - function removeChild(aChild:nsIDOMNode)
  *   - function removeAllItems()
  *   - get:nsIDOMNode selectedItem()
  *   - set selectedItem(aChild:nsIDOMNode)
  *   - function getAttribute(aName:string)
  *   - function setAttribute(aName:string, aValue:string)
  *   - function removeAttribute(aName:string)
- *   - function addEventListener(aName:string, aCallback:function, aBubbleFlag:boolean)
- *   - function removeEventListener(aName:string, aCallback:function, aBubbleFlag:boolean)
+ *   - function addEventListener(aName:string, aCallback:function,
+ *                               aBubbleFlag:boolean)
+ *   - function removeEventListener(aName:string, aCallback:function,
+ *                                  aBubbleFlag:boolean)
  *
  * Optional methods that can be implemented by the widget:
  *   - function ensureElementIsVisible(aChild:nsIDOMNode)
  *
- * Optional attributes that may be handled (when calling get/set/removeAttribute):
+ * Optional attributes that may be handled (when calling
+ * get/set/removeAttribute):
  *   - "emptyText": label temporarily added when there are no items present
  *   - "headerText": label permanently added as a header
  *
  * For automagical keyboard and mouse accessibility, the widget should be an
  * event emitter with the following events:
  *   - "keyPress" -> (aName:string, aEvent:KeyboardEvent)
  *   - "mousePress" -> (aName:string, aEvent:MouseEvent)
  */
 const WidgetMethods = exports.WidgetMethods = {
   /**
    * Sets the element node or widget associated with this container.
-   * @param nsIDOMNode | object aWidget
+   * @param nsIDOMNode | object widget
    */
-  set widget(aWidget) {
-    this._widget = aWidget;
-
+  set widget(widget) {
+    this._widget = widget;
 
     // Can't use a WeakMap for _itemsByValue because keys are strings, and
     // can't use one for _itemsByElement either, since it needs to be iterable.
     XPCOMUtils.defineLazyGetter(this, "_itemsByValue", () => new Map());
     XPCOMUtils.defineLazyGetter(this, "_itemsByElement", () => new Map());
     XPCOMUtils.defineLazyGetter(this, "_stagedItems", () => []);
 
     // Handle internal events emitted by the widget if necessary.
-    if (ViewHelpers.isEventEmitter(aWidget)) {
-      aWidget.on("keyPress", this._onWidgetKeyPress.bind(this));
-      aWidget.on("mousePress", this._onWidgetMousePress.bind(this));
+    if (ViewHelpers.isEventEmitter(widget)) {
+      widget.on("keyPress", this._onWidgetKeyPress.bind(this));
+      widget.on("mousePress", this._onWidgetMousePress.bind(this));
     }
   },
 
   /**
    * Gets the element node or widget associated with this container.
    * @return nsIDOMNode | object
    */
   get widget() {
@@ -528,109 +549,110 @@ const WidgetMethods = exports.WidgetMeth
    * multiple items.
    *
    * By default, this container assumes that all the items should be displayed
    * sorted by their value. This can be overridden with the "index" flag,
    * specifying on which position should an item be appended. The "staged" and
    * "index" flags are mutually exclusive, meaning that all staged items
    * will always be appended.
    *
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        A prebuilt node to be wrapped.
-   * @param string aValue
+   * @param string value
    *        A string identifying the node.
-   * @param object aOptions [optional]
+   * @param object options [optional]
    *        Additional options or flags supported by this operation:
    *          - attachment: some attached primitive/object for the item
    *          - staged: true to stage the item to be appended later
    *          - index: specifies on which position should the item be appended
    *          - attributes: a batch of attributes set to the displayed element
    *          - finalize: function invoked when the item is removed
    * @return Item
    *         The item associated with the displayed element if an unstaged push,
    *         undefined if the item was staged for a later commit.
    */
-  push: function ([aElement, aValue], aOptions = {}) {
-    let item = new Item(this, aElement, aValue, aOptions.attachment);
+  push: function ([element, value], options = {}) {
+    let item = new Item(this, element, value, options.attachment);
 
     // Batch the item to be added later.
-    if (aOptions.staged) {
+    if (options.staged) {
       // An ulterior commit operation will ignore any specified index, so
       // no reason to keep it around.
-      aOptions.index = undefined;
-      return void this._stagedItems.push({ item: item, options: aOptions });
+      options.index = undefined;
+      return void this._stagedItems.push({ item: item, options: options });
     }
     // Find the target position in this container and insert the item there.
-    if (!("index" in aOptions)) {
-      return this._insertItemAt(this._findExpectedIndexFor(item), item, aOptions);
+    if (!("index" in options)) {
+      return this._insertItemAt(this._findExpectedIndexFor(item), item,
+                                options);
     }
     // Insert the item at the specified index. If negative or out of bounds,
     // the item will be simply appended.
-    return this._insertItemAt(aOptions.index, item, aOptions);
+    return this._insertItemAt(options.index, item, options);
   },
 
   /**
    * Flushes all the prepared items into this container.
    * Any specified index on the items will be ignored. Everything is appended.
    *
-   * @param object aOptions [optional]
+   * @param object options [optional]
    *        Additional options or flags supported by this operation:
    *          - sorted: true to sort all the items before adding them
    */
-  commit: function (aOptions = {}) {
+  commit: function (options = {}) {
     let stagedItems = this._stagedItems;
 
     // Sort the items before adding them to this container, if preferred.
-    if (aOptions.sorted) {
+    if (options.sorted) {
       stagedItems.sort((a, b) => this._currentSortPredicate(a.item, b.item));
     }
     // Append the prepared items to this container.
-    for (let { item, options } of stagedItems) {
-      this._insertItemAt(-1, item, options);
+    for (let { item, opt } of stagedItems) {
+      this._insertItemAt(-1, item, opt);
     }
     // Recreate the temporary items list for ulterior pushes.
     this._stagedItems.length = 0;
   },
 
   /**
    * Immediately removes the specified item from this container.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item associated with the element to remove.
    */
-  remove: function (aItem) {
-    if (!aItem) {
+  remove: function (item) {
+    if (!item) {
       return;
     }
-    this._widget.removeChild(aItem._target);
-    this._untangleItem(aItem);
+    this._widget.removeChild(item._target);
+    this._untangleItem(item);
 
     if (!this._itemsByElement.size) {
       this._preferredValue = this.selectedValue;
       this._widget.selectedItem = null;
       this._widget.setAttribute("emptyText", this._emptyText);
     }
   },
 
   /**
    * Removes the item at the specified index from this container.
    *
-   * @param number aIndex
+   * @param number index
    *        The index of the item to remove.
    */
-  removeAt: function (aIndex) {
-    this.remove(this.getItemAtIndex(aIndex));
+  removeAt: function (index) {
+    this.remove(this.getItemAtIndex(index));
   },
 
   /**
    * Removes the items in this container based on a predicate.
    */
-  removeForPredicate: function (aPredicate) {
+  removeForPredicate: function (predicate) {
     let item;
-    while ((item = this.getItemForPredicate(aPredicate))) {
+    while ((item = this.getItemForPredicate(predicate))) {
       this.remove(item);
     }
   },
 
   /**
    * Removes all items from this container.
    */
   empty: function () {
@@ -646,127 +668,130 @@ const WidgetMethods = exports.WidgetMeth
     this._itemsByValue.clear();
     this._itemsByElement.clear();
     this._stagedItems.length = 0;
   },
 
   /**
    * Ensures the specified item is visible in this container.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item to bring into view.
    */
-  ensureItemIsVisible: function (aItem) {
-    this._widget.ensureElementIsVisible(aItem._target);
+  ensureItemIsVisible: function (item) {
+    this._widget.ensureElementIsVisible(item._target);
   },
 
   /**
    * Ensures the item at the specified index is visible in this container.
    *
-   * @param number aIndex
+   * @param number index
    *        The index of the item to bring into view.
    */
-  ensureIndexIsVisible: function (aIndex) {
-    this.ensureItemIsVisible(this.getItemAtIndex(aIndex));
+  ensureIndexIsVisible: function (index) {
+    this.ensureItemIsVisible(this.getItemAtIndex(index));
   },
 
   /**
    * Sugar for ensuring the selected item is visible in this container.
    */
   ensureSelectedItemIsVisible: function () {
     this.ensureItemIsVisible(this.selectedItem);
   },
 
   /**
    * If supported by the widget, the label string temporarily added to this
    * container when there are no child items present.
    */
-  set emptyText(aValue) {
-    this._emptyText = aValue;
+  set emptyText(value) {
+    this._emptyText = value;
 
     // Apply the emptyText attribute right now if there are no child items.
     if (!this._itemsByElement.size) {
-      this._widget.setAttribute("emptyText", aValue);
+      this._widget.setAttribute("emptyText", value);
     }
   },
 
   /**
    * If supported by the widget, the label string permanently added to this
    * container as a header.
-   * @param string aValue
+   * @param string value
    */
-  set headerText(aValue) {
-    this._headerText = aValue;
-    this._widget.setAttribute("headerText", aValue);
+  set headerText(value) {
+    this._headerText = value;
+    this._widget.setAttribute("headerText", value);
   },
 
   /**
    * Toggles all the items in this container hidden or visible.
    *
    * This does not change the default filtering predicate, so newly inserted
    * items will always be visible. Use WidgetMethods.filterContents if you care.
    *
-   * @param boolean aVisibleFlag
+   * @param boolean visibleFlag
    *        Specifies the intended visibility.
    */
-  toggleContents: function (aVisibleFlag) {
-    for (let [element, item] of this._itemsByElement) {
-      element.hidden = !aVisibleFlag;
+  toggleContents: function (visibleFlag) {
+    for (let [element] of this._itemsByElement) {
+      element.hidden = !visibleFlag;
     }
   },
 
   /**
    * Toggles all items in this container hidden or visible based on a predicate.
    *
-   * @param function aPredicate [optional]
+   * @param function predicate [optional]
    *        Items are toggled according to the return value of this function,
-   *        which will become the new default filtering predicate in this container.
+   *        which will become the new default filtering predicate in this
+   *        container.
    *        If unspecified, all items will be toggled visible.
    */
-  filterContents: function (aPredicate = this._currentFilterPredicate) {
-    this._currentFilterPredicate = aPredicate;
+  filterContents: function (predicate = this._currentFilterPredicate) {
+    this._currentFilterPredicate = predicate;
 
     for (let [element, item] of this._itemsByElement) {
-      element.hidden = !aPredicate(item);
+      element.hidden = !predicate(item);
     }
   },
 
   /**
    * Sorts all the items in this container based on a predicate.
    *
-   * @param function aPredicate [optional]
+   * @param function predicate [optional]
    *        Items are sorted according to the return value of the function,
-   *        which will become the new default sorting predicate in this container.
-   *        If unspecified, all items will be sorted by their value.
+   *        which will become the new default sorting predicate in this
+   *        container. If unspecified, all items will be sorted by their value.
    */
-  sortContents: function (aPredicate = this._currentSortPredicate) {
-    let sortedItems = this.items.sort(this._currentSortPredicate = aPredicate);
+  sortContents: function (predicate = this._currentSortPredicate) {
+    let sortedItems = this.items.sort(this._currentSortPredicate = predicate);
 
     for (let i = 0, len = sortedItems.length; i < len; i++) {
       this.swapItems(this.getItemAtIndex(i), sortedItems[i]);
     }
   },
 
   /**
    * Visually swaps two items in this container.
    *
-   * @param Item aFirst
+   * @param Item first
    *        The first item to be swapped.
-   * @param Item aSecond
+   * @param Item second
    *        The second item to be swapped.
    */
-  swapItems: function (aFirst, aSecond) {
-    if (aFirst == aSecond) { // We're just dandy, thank you.
+  swapItems: function (first, second) {
+    if (first == second) {
+      // We're just dandy, thank you.
       return;
     }
-    let { _prebuiltNode: firstPrebuiltTarget, _target: firstTarget } = aFirst;
-    let { _prebuiltNode: secondPrebuiltTarget, _target: secondTarget } = aSecond;
+    let { _prebuiltNode: firstPrebuiltTarget, _target: firstTarget } = first;
+    let { _prebuiltNode: secondPrebuiltTarget, _target: secondTarget } = second;
 
-    // If the two items were constructed with prebuilt nodes as DocumentFragments,
-    // then those DocumentFragments are now empty and need to be reassembled.
+    // If the two items were constructed with prebuilt nodes as
+    // DocumentFragments, then those DocumentFragments are now
+    // empty and need to be reassembled.
     if (firstPrebuiltTarget instanceof Ci.nsIDOMDocumentFragment) {
       for (let node of firstTarget.childNodes) {
         firstPrebuiltTarget.appendChild(node.cloneNode(true));
       }
     }
     if (secondPrebuiltTarget instanceof Ci.nsIDOMDocumentFragment) {
       for (let node of secondTarget.childNodes) {
         secondPrebuiltTarget.appendChild(node.cloneNode(true));
@@ -784,58 +809,58 @@ const WidgetMethods = exports.WidgetMeth
       selectedIndex = i;
     } else if (selectedTarget == secondTarget) {
       selectedIndex = j;
     }
 
     // 3. Silently nuke both items, nobody needs to know about this.
     this._widget.removeChild(firstTarget);
     this._widget.removeChild(secondTarget);
-    this._unlinkItem(aFirst);
-    this._unlinkItem(aSecond);
+    this._unlinkItem(first);
+    this._unlinkItem(second);
 
     // 4. Add the items again, but reversing their indices.
-    this._insertItemAt.apply(this, i < j ? [i, aSecond] : [j, aFirst]);
-    this._insertItemAt.apply(this, i < j ? [j, aFirst] : [i, aSecond]);
+    this._insertItemAt.apply(this, i < j ? [i, second] : [j, first]);
+    this._insertItemAt.apply(this, i < j ? [j, first] : [i, second]);
 
     // 5. Restore the previous selection, if necessary.
     if (selectedIndex == i) {
-      this._widget.selectedItem = aFirst._target;
+      this._widget.selectedItem = first._target;
     } else if (selectedIndex == j) {
-      this._widget.selectedItem = aSecond._target;
+      this._widget.selectedItem = second._target;
     }
 
     // 6. Let the outside world know that these two items were swapped.
-    ViewHelpers.dispatchEvent(aFirst.target, "swap", [aSecond, aFirst]);
+    ViewHelpers.dispatchEvent(first.target, "swap", [second, first]);
   },
 
   /**
    * Visually swaps two items in this container at specific indices.
    *
-   * @param number aFirst
+   * @param number first
    *        The index of the first item to be swapped.
-   * @param number aSecond
+   * @param number second
    *        The index of the second item to be swapped.
    */
-  swapItemsAtIndices: function (aFirst, aSecond) {
-    this.swapItems(this.getItemAtIndex(aFirst), this.getItemAtIndex(aSecond));
+  swapItemsAtIndices: function (first, second) {
+    this.swapItems(this.getItemAtIndex(first), this.getItemAtIndex(second));
   },
 
   /**
    * Checks whether an item with the specified value is among the elements
    * shown in this container.
    *
-   * @param string aValue
+   * @param string value
    *        The item's value.
    * @return boolean
    *         True if the value is known, false otherwise.
    */
-  containsValue: function (aValue) {
-    return this._itemsByValue.has(aValue) ||
-           this._stagedItems.some(({ item }) => item._value == aValue);
+  containsValue: function (value) {
+    return this._itemsByValue.has(value) ||
+           this._stagedItems.some(({ item }) => item._value == value);
   },
 
   /**
    * Gets the "preferred value". This is the latest selected item's value,
    * remembered just before emptying this container.
    * @return string
    */
   get preferredValue() {
@@ -885,97 +910,98 @@ const WidgetMethods = exports.WidgetMeth
   get selectedAttachment() {
     let selectedElement = this._widget.selectedItem;
     if (selectedElement) {
       return this._itemsByElement.get(selectedElement).attachment;
     }
     return null;
   },
 
-  _selectItem: function (aItem) {
+  _selectItem: function (item) {
     // A falsy item is allowed to invalidate the current selection.
-    let targetElement = aItem ? aItem._target : null;
+    let targetElement = item ? item._target : null;
     let prevElement = this._widget.selectedItem;
 
     // Make sure the selected item's target element is focused and visible.
     if (this.autoFocusOnSelection && targetElement) {
       targetElement.focus();
     }
 
     if (targetElement != prevElement) {
       this._widget.selectedItem = targetElement;
     }
   },
 
   /**
    * Selects the element with the entangled item in this container.
-   * @param Item | function aItem
+   * @param Item | function item
    */
-  set selectedItem(aItem) {
+  set selectedItem(item) {
     // A predicate is allowed to select a specific item.
     // If no item is matched, then the current selection is removed.
-    if (typeof aItem == "function") {
-      aItem = this.getItemForPredicate(aItem);
+    if (typeof item == "function") {
+      item = this.getItemForPredicate(item);
     }
 
-    let targetElement = aItem ? aItem._target : null;
+    let targetElement = item ? item._target : null;
     let prevElement = this._widget.selectedItem;
 
     if (this.maintainSelectionVisible && targetElement) {
       // Some methods are optional. See the WidgetMethods object documentation
       // for a comprehensive list.
       if ("ensureElementIsVisible" in this._widget) {
         this._widget.ensureElementIsVisible(targetElement);
       }
     }
 
-    this._selectItem(aItem);
+    this._selectItem(item);
 
     // Prevent selecting the same item again and avoid dispatching
     // a redundant selection event, so return early.
     if (targetElement != prevElement) {
       let dispTarget = targetElement || prevElement;
-      let dispName = this.suppressSelectionEvents ? "suppressed-select" : "select";
-      ViewHelpers.dispatchEvent(dispTarget, dispName, aItem);
+      let dispName = this.suppressSelectionEvents ? "suppressed-select"
+                                                  : "select";
+      ViewHelpers.dispatchEvent(dispTarget, dispName, item);
     }
   },
 
   /**
    * Selects the element at the specified index in this container.
-   * @param number aIndex
+   * @param number index
    */
-  set selectedIndex(aIndex) {
-    let targetElement = this._widget.getItemAtIndex(aIndex);
+  set selectedIndex(index) {
+    let targetElement = this._widget.getItemAtIndex(index);
     if (targetElement) {
       this.selectedItem = this._itemsByElement.get(targetElement);
       return;
     }
     this.selectedItem = null;
   },
 
   /**
    * Selects the element with the specified value in this container.
-   * @param string aValue
+   * @param string value
    */
-  set selectedValue(aValue) {
-    this.selectedItem = this._itemsByValue.get(aValue);
+  set selectedValue(value) {
+    this.selectedItem = this._itemsByValue.get(value);
   },
 
   /**
    * Deselects and re-selects an item in this container.
    *
    * Useful when you want a "select" event to be emitted, even though
    * the specified item was already selected.
    *
-   * @param Item | function aItem
+   * @param Item | function item
    * @see `set selectedItem`
    */
-  forceSelect: function (aItem) {
+  forceSelect: function (item) {
     this.selectedItem = null;
-    this.selectedItem = aItem;
+    this.selectedItem = item;
   },
 
   /**
    * Specifies if this container should try to keep the selected item visible.
    * (For example, when new items are added the selection is brought into view).
    */
   maintainSelectionVisible: true,
 
@@ -1057,61 +1083,62 @@ const WidgetMethods = exports.WidgetMeth
   focusPrevItem: function () {
     this.focusItemAtDelta(-1);
   },
 
   /**
    * Focuses another item in this container based on the index distance
    * from the currently focused item.
    *
-   * @param number aDelta
+   * @param number delta
    *        A scalar specifying by how many items should the selection change.
    */
-  focusItemAtDelta: function (aDelta) {
+  focusItemAtDelta: function (delta) {
     // Make sure the currently selected item is also focused, so that the
     // command dispatcher mechanism has a relative node to work with.
     // If there's no selection, just select an item at a corresponding index
-    // (e.g. the first item in this container if aDelta <= 1).
+    // (e.g. the first item in this container if delta <= 1).
     let selectedElement = this._widget.selectedItem;
     if (selectedElement) {
       selectedElement.focus();
     } else {
-      this.selectedIndex = Math.max(0, aDelta - 1);
+      this.selectedIndex = Math.max(0, delta - 1);
       return;
     }
 
-    let direction = aDelta > 0 ? "advanceFocus" : "rewindFocus";
-    let distance = Math.abs(Math[aDelta > 0 ? "ceil" : "floor"](aDelta));
+    let direction = delta > 0 ? "advanceFocus" : "rewindFocus";
+    let distance = Math.abs(Math[delta > 0 ? "ceil" : "floor"](delta));
     while (distance--) {
       if (!this._focusChange(direction)) {
-        break; // Out of bounds.
+        // Out of bounds.
+        break;
       }
     }
 
     // Synchronize the selected item as being the currently focused element.
     this.selectedItem = this.getItemForElement(this._focusedElement);
   },
 
   /**
    * Focuses the next or previous item in this container.
    *
-   * @param string aDirection
+   * @param string direction
    *        Either "advanceFocus" or "rewindFocus".
    * @return boolean
    *         False if the focus went out of bounds and the first or last item
    *         in this container was focused instead.
    */
-  _focusChange: function (aDirection) {
+  _focusChange: function (direction) {
     let commandDispatcher = this._commandDispatcher;
     let prevFocusedElement = commandDispatcher.focusedElement;
     let currFocusedElement;
 
     do {
       commandDispatcher.suppressFocusScroll = true;
-      commandDispatcher[aDirection]();
+      commandDispatcher[direction]();
       currFocusedElement = commandDispatcher.focusedElement;
 
       // Make sure the newly focused item is a part of this container. If the
       // focus goes out of bounds, revert the previously focused item.
       if (!this.getItemForElement(currFocusedElement)) {
         prevFocusedElement.focus();
         return false;
       }
@@ -1128,17 +1155,18 @@ const WidgetMethods = exports.WidgetMeth
    */
   get _commandDispatcher() {
     if (this._cachedCommandDispatcher) {
       return this._cachedCommandDispatcher;
     }
     let someElement = this._widget.getItemAtIndex(0);
     if (someElement) {
       let commandDispatcher = someElement.ownerDocument.commandDispatcher;
-      return this._cachedCommandDispatcher = commandDispatcher;
+      this._cachedCommandDispatcher = commandDispatcher;
+      return commandDispatcher;
     }
     return null;
   },
 
   /**
    * Gets the currently focused element in this container.
    *
    * @return nsIDOMNode
@@ -1150,129 +1178,129 @@ const WidgetMethods = exports.WidgetMeth
       return commandDispatcher.focusedElement;
     }
     return null;
   },
 
   /**
    * Gets the item in the container having the specified index.
    *
-   * @param number aIndex
+   * @param number index
    *        The index used to identify the element.
    * @return Item
    *         The matched item, or null if nothing is found.
    */
-  getItemAtIndex: function (aIndex) {
-    return this.getItemForElement(this._widget.getItemAtIndex(aIndex));
+  getItemAtIndex: function (index) {
+    return this.getItemForElement(this._widget.getItemAtIndex(index));
   },
 
   /**
    * Gets the item in the container having the specified value.
    *
-   * @param string aValue
+   * @param string value
    *        The value used to identify the element.
    * @return Item
    *         The matched item, or null if nothing is found.
    */
-  getItemByValue: function (aValue) {
-    return this._itemsByValue.get(aValue);
+  getItemByValue: function (value) {
+    return this._itemsByValue.get(value);
   },
 
   /**
    * Gets the item in the container associated with the specified element.
    *
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        The element used to identify the item.
-   * @param object aFlags [optional]
+   * @param object flags [optional]
    *        Additional options for showing the source. Supported options:
    *          - noSiblings: if siblings shouldn't be taken into consideration
    *                        when searching for the associated item.
    * @return Item
    *         The matched item, or null if nothing is found.
    */
-  getItemForElement: function (aElement, aFlags = {}) {
-    while (aElement) {
-      let item = this._itemsByElement.get(aElement);
+  getItemForElement: function (element, flags = {}) {
+    while (element) {
+      let item = this._itemsByElement.get(element);
 
       // Also search the siblings if allowed.
-      if (!aFlags.noSiblings) {
+      if (!flags.noSiblings) {
         item = item ||
-          this._itemsByElement.get(aElement.nextElementSibling) ||
-          this._itemsByElement.get(aElement.previousElementSibling);
+          this._itemsByElement.get(element.nextElementSibling) ||
+          this._itemsByElement.get(element.previousElementSibling);
       }
       if (item) {
         return item;
       }
-      aElement = aElement.parentNode;
+      element = element.parentNode;
     }
     return null;
   },
 
   /**
    * Gets a visible item in this container validating a specified predicate.
    *
-   * @param function aPredicate
+   * @param function predicate
    *        The first item which validates this predicate is returned
    * @return Item
    *         The matched item, or null if nothing is found.
    */
-  getItemForPredicate: function (aPredicate, aOwner = this) {
+  getItemForPredicate: function (predicate, owner = this) {
     // Recursively check the items in this widget for a predicate match.
-    for (let [element, item] of aOwner._itemsByElement) {
+    for (let [element, item] of owner._itemsByElement) {
       let match;
-      if (aPredicate(item) && !element.hidden) {
+      if (predicate(item) && !element.hidden) {
         match = item;
       } else {
-        match = this.getItemForPredicate(aPredicate, item);
+        match = this.getItemForPredicate(predicate, item);
       }
       if (match) {
         return match;
       }
     }
     // Also check the staged items. No need to do this recursively since
     // they're not even appended to the view yet.
     for (let { item } of this._stagedItems) {
-      if (aPredicate(item)) {
+      if (predicate(item)) {
         return item;
       }
     }
     return null;
   },
 
   /**
    * Shortcut function for getItemForPredicate which works on item attachments.
    * @see getItemForPredicate
    */
-  getItemForAttachment: function (aPredicate, aOwner = this) {
-    return this.getItemForPredicate(e => aPredicate(e.attachment));
+  getItemForAttachment: function (predicate, owner = this) {
+    return this.getItemForPredicate(e => predicate(e.attachment));
   },
 
   /**
    * Finds the index of an item in the container.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item get the index for.
    * @return number
    *         The index of the matched item, or -1 if nothing is found.
    */
-  indexOfItem: function (aItem) {
-    return this._indexOfElement(aItem._target);
+  indexOfItem: function (item) {
+    return this._indexOfElement(item._target);
   },
 
   /**
    * Finds the index of an element in the container.
    *
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        The element get the index for.
    * @return number
    *         The index of the matched element, or -1 if nothing is found.
    */
-  _indexOfElement: function (aElement) {
+  _indexOfElement: function (element) {
     for (let i = 0; i < this._itemsByElement.size; i++) {
-      if (this._widget.getItemAtIndex(i) == aElement) {
+      if (this._widget.getItemAtIndex(i) == element) {
         return i;
       }
     }
     return -1;
   },
 
   /**
    * Gets the total number of items in this container.
@@ -1319,245 +1347,248 @@ const WidgetMethods = exports.WidgetMeth
   get visibleItems() {
     return this.items.filter(e => !e._target.hidden);
   },
 
   /**
    * Checks if an item is unique in this container. If an item's value is an
    * empty string, "undefined" or "null", it is considered unique.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item for which to verify uniqueness.
    * @return boolean
    *         True if the item is unique, false otherwise.
    */
-  isUnique: function (aItem) {
-    let value = aItem._value;
+  isUnique: function (item) {
+    let value = item._value;
     if (value == "" || value == "undefined" || value == "null") {
       return true;
     }
     return !this._itemsByValue.has(value);
   },
 
   /**
    * Checks if an item is eligible for this container. By default, this checks
    * whether an item is unique and has a prebuilt target node.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item for which to verify eligibility.
    * @return boolean
    *         True if the item is eligible, false otherwise.
    */
-  isEligible: function (aItem) {
-    return this.isUnique(aItem) && aItem._prebuiltNode;
+  isEligible: function (item) {
+    return this.isUnique(item) && item._prebuiltNode;
   },
 
   /**
    * Finds the expected item index in this container based on the default
    * sort predicate.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item for which to get the expected index.
    * @return number
    *         The expected item index.
    */
-  _findExpectedIndexFor: function (aItem) {
+  _findExpectedIndexFor: function (item) {
     let itemCount = this.itemCount;
     for (let i = 0; i < itemCount; i++) {
-      if (this._currentSortPredicate(this.getItemAtIndex(i), aItem) > 0) {
+      if (this._currentSortPredicate(this.getItemAtIndex(i), item) > 0) {
         return i;
       }
     }
     return itemCount;
   },
 
   /**
    * Immediately inserts an item in this container at the specified index.
    *
-   * @param number aIndex
+   * @param number index
    *        The position in the container intended for this item.
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
-   * @param object aOptions [optional]
+   * @param object options [optional]
    *        Additional options or flags supported by this operation:
    *          - attributes: a batch of attributes set to the displayed element
    *          - finalize: function when the item is untangled (removed)
    * @return Item
    *         The item associated with the displayed element, null if rejected.
    */
-  _insertItemAt: function (aIndex, aItem, aOptions = {}) {
-    if (!this.isEligible(aItem)) {
+  _insertItemAt: function (index, item, options = {}) {
+    if (!this.isEligible(item)) {
       return null;
     }
 
     // Entangle the item with the newly inserted node.
     // Make sure this is done with the value returned by insertItemAt(),
     // to avoid storing a potential DocumentFragment.
-    let node = aItem._prebuiltNode;
-    let attachment = aItem.attachment;
-    this._entangleItem(aItem, this._widget.insertItemAt(aIndex, node, attachment));
+    let node = item._prebuiltNode;
+    let attachment = item.attachment;
+    this._entangleItem(item,
+                       this._widget.insertItemAt(index, node, attachment));
 
     // Handle any additional options after entangling the item.
-    if (!this._currentFilterPredicate(aItem)) {
-      aItem._target.hidden = true;
+    if (!this._currentFilterPredicate(item)) {
+      item._target.hidden = true;
     }
     if (this.autoFocusOnFirstItem && this._itemsByElement.size == 1) {
-      aItem._target.focus();
+      item._target.focus();
     }
-    if (aOptions.attributes) {
-      aOptions.attributes.forEach(e => aItem._target.setAttribute(e[0], e[1]));
+    if (options.attributes) {
+      options.attributes.forEach(e => item._target.setAttribute(e[0], e[1]));
     }
-    if (aOptions.finalize) {
-      aItem.finalize = aOptions.finalize;
+    if (options.finalize) {
+      item.finalize = options.finalize;
     }
 
     // Hide the empty text if the selection wasn't lost.
     this._widget.removeAttribute("emptyText");
 
     // Return the item associated with the displayed element.
-    return aItem;
+    return item;
   },
 
   /**
    * Entangles an item (model) with a displayed node element (view).
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
-   * @param nsIDOMNode aElement
+   * @param nsIDOMNode element
    *        The element displaying the item.
    */
-  _entangleItem: function (aItem, aElement) {
-    this._itemsByValue.set(aItem._value, aItem);
-    this._itemsByElement.set(aElement, aItem);
-    aItem._target = aElement;
+  _entangleItem: function (item, element) {
+    this._itemsByValue.set(item._value, item);
+    this._itemsByElement.set(element, item);
+    item._target = element;
   },
 
   /**
    * Untangles an item (model) from a displayed node element (view).
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
    */
-  _untangleItem: function (aItem) {
-    if (aItem.finalize) {
-      aItem.finalize(aItem);
+  _untangleItem: function (item) {
+    if (item.finalize) {
+      item.finalize(item);
     }
-    for (let childItem of aItem) {
-      aItem.remove(childItem);
+    for (let childItem of item) {
+      item.remove(childItem);
     }
 
-    this._unlinkItem(aItem);
-    aItem._target = null;
+    this._unlinkItem(item);
+    item._target = null;
   },
 
   /**
    * Deletes an item from the its parent's storage maps.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item describing a target element.
    */
-  _unlinkItem: function (aItem) {
-    this._itemsByValue.delete(aItem._value);
-    this._itemsByElement.delete(aItem._target);
+  _unlinkItem: function (item) {
+    this._itemsByValue.delete(item._value);
+    this._itemsByElement.delete(item._target);
   },
 
   /**
    * The keyPress event listener for this container.
-   * @param string aName
-   * @param KeyboardEvent aEvent
+   * @param string name
+   * @param KeyboardEvent event
    */
-  _onWidgetKeyPress: function (aName, aEvent) {
+  _onWidgetKeyPress: function (name, event) {
     // Prevent scrolling when pressing navigation keys.
-    ViewHelpers.preventScrolling(aEvent);
+    ViewHelpers.preventScrolling(event);
 
-    switch (aEvent.keyCode) {
-      case aEvent.DOM_VK_UP:
-      case aEvent.DOM_VK_LEFT:
+    switch (event.keyCode) {
+      case event.DOM_VK_UP:
+      case event.DOM_VK_LEFT:
         this.focusPrevItem();
         return;
-      case aEvent.DOM_VK_DOWN:
-      case aEvent.DOM_VK_RIGHT:
+      case event.DOM_VK_DOWN:
+      case event.DOM_VK_RIGHT:
         this.focusNextItem();
         return;
-      case aEvent.DOM_VK_PAGE_UP:
-        this.focusItemAtDelta(-(this.pageSize || (this.itemCount / PAGE_SIZE_ITEM_COUNT_RATIO)));
+      case event.DOM_VK_PAGE_UP:
+        this.focusItemAtDelta(-(this.pageSize ||
+                               (this.itemCount / PAGE_SIZE_ITEM_COUNT_RATIO)));
         return;
-      case aEvent.DOM_VK_PAGE_DOWN:
-        this.focusItemAtDelta(+(this.pageSize || (this.itemCount / PAGE_SIZE_ITEM_COUNT_RATIO)));
+      case event.DOM_VK_PAGE_DOWN:
+        this.focusItemAtDelta(+(this.pageSize ||
+                               (this.itemCount / PAGE_SIZE_ITEM_COUNT_RATIO)));
         return;
-      case aEvent.DOM_VK_HOME:
+      case event.DOM_VK_HOME:
         this.focusFirstVisibleItem();
         return;
-      case aEvent.DOM_VK_END:
+      case event.DOM_VK_END:
         this.focusLastVisibleItem();
         return;
     }
   },
 
   /**
    * The mousePress event listener for this container.
-   * @param string aName
-   * @param MouseEvent aEvent
+   * @param string name
+   * @param MouseEvent event
    */
-  _onWidgetMousePress: function (aName, aEvent) {
-    if (aEvent.button != 0 && !this.allowFocusOnRightClick) {
+  _onWidgetMousePress: function (name, event) {
+    if (event.button != 0 && !this.allowFocusOnRightClick) {
       // Only allow left-click to trigger this event.
       return;
     }
 
-    let item = this.getItemForElement(aEvent.target);
+    let item = this.getItemForElement(event.target);
     if (item) {
       // The container is not empty and we clicked on an actual item.
       this.selectedItem = item;
       // Make sure the current event's target element is also focused.
       this.autoFocusOnInput && item._target.focus();
     }
   },
 
   /**
    * The predicate used when filtering items. By default, all items in this
    * view are visible.
    *
-   * @param Item aItem
+   * @param Item item
    *        The item passing through the filter.
    * @return boolean
    *         True if the item should be visible, false otherwise.
    */
-  _currentFilterPredicate: function (aItem) {
+  _currentFilterPredicate: function (item) {
     return true;
   },
 
   /**
    * The predicate used when sorting items. By default, items in this view
    * are sorted by their label.
    *
-   * @param Item aFirst
+   * @param Item first
    *        The first item used in the comparison.
-   * @param Item aSecond
+   * @param Item second
    *        The second item used in the comparison.
    * @return number
-   *         -1 to sort aFirst to a lower index than aSecond
-   *          0 to leave aFirst and aSecond unchanged with respect to each other
-   *          1 to sort aSecond to a lower index than aFirst
+   *         -1 to sort first to a lower index than second
+   *          0 to leave first and second unchanged with respect to each other
+   *          1 to sort second to a lower index than first
    */
-  _currentSortPredicate: function (aFirst, aSecond) {
-    return +(aFirst._value.toLowerCase() > aSecond._value.toLowerCase());
+  _currentSortPredicate: function (first, second) {
+    return +(first._value.toLowerCase() > second._value.toLowerCase());
   },
 
   /**
-   * Call a method on this widget named `aMethodName`. Any further arguments are
+   * Call a method on this widget named `methodName`. Any further arguments are
    * passed on to the method. Returns the result of the method call.
    *
-   * @param String aMethodName
+   * @param String methodName
    *        The name of the method you want to call.
-   * @param aArgs
+   * @param args
    *        Optional. Any arguments you want to pass through to the method.
    */
-  callMethod: function (aMethodName, ...aArgs) {
-    return this._widget[aMethodName].apply(this._widget, aArgs);
+  callMethod: function (methodName, ...args) {
+    return this._widget[methodName].apply(this._widget, args);
   },
 
   _widget: null,
   _emptyText: "",
   _headerText: "",
   _preferredValue: "",
   _cachedCommandDispatcher: null
 };