Bug 1260630 - ESLint cleanup of devtools/client/inspector/computed/. r=bgrins, a=test-only
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 13 May 2016 13:09:17 +0200
changeset 332938 a737e987dfa7608d47c26d99c27c807172cdd185
parent 332937 360e90227281e8675e72db6a1eda64c29a3ee77c
child 332939 4902143daafcfca72916ac8cba4ae8150ef271a1
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, test-only
bugs1260630
milestone48.0a2
Bug 1260630 - ESLint cleanup of devtools/client/inspector/computed/. r=bgrins, a=test-only MozReview-Commit-ID: BreSVf4bPf
.eslintignore
devtools/client/inspector/computed/computed.js
devtools/client/inspector/computed/test/browser_computed_browser-styles.js
devtools/client/inspector/computed/test/browser_computed_cycle_color.js
devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
devtools/client/inspector/computed/test/browser_computed_media-queries.js
devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
devtools/client/inspector/computed/test/browser_computed_original-source-link.js
devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
devtools/client/inspector/computed/test/browser_computed_search-filter.js
devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
devtools/client/inspector/computed/test/doc_media_queries.html
devtools/client/inspector/computed/test/head.js
--- a/.eslintignore
+++ b/.eslintignore
@@ -80,17 +80,16 @@ browser/extensions/loop/**
 devtools/*.js
 devtools/client/canvasdebugger/**
 devtools/client/commandline/**
 devtools/client/debugger/**
 devtools/client/eyedropper/**
 devtools/client/framework/**
 # devtools/client/inspector/shared/*.js files are eslint-clean, so they aren't
 # included in the ignore list.
-devtools/client/inspector/computed/**
 devtools/client/inspector/fonts/**
 devtools/client/inspector/test/**
 devtools/client/inspector/*.js
 devtools/client/jsonview/lib/**
 devtools/client/memory/**
 devtools/client/netmonitor/test/**
 devtools/client/netmonitor/har/test/**
 devtools/client/performance/**
--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -26,22 +26,22 @@ loader.lazyRequireGetter(this, "overlays
 loader.lazyRequireGetter(this, "StyleInspectorMenu",
   "devtools/client/inspector/shared/style-inspector-menu");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 
-XPCOMUtils.defineLazyGetter(CssComputedView, "_strings", function() {
+XPCOMUtils.defineLazyGetter(CssComputedView, "_strings", function () {
   return Services.strings.createBundle(
     "chrome://devtools-shared/locale/styleinspector.properties");
 });
 
-XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function () {
   return Cc["@mozilla.org/widget/clipboardhelper;1"]
          .getService(Ci.nsIClipboardHelper);
 });
 
 const FILTER_CHANGED_TIMEOUT = 150;
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 /**
@@ -59,66 +59,66 @@ const HTML_NS = "http://www.w3.org/1999/
  *            before yielding to the main loop.
  *          onDone {function} Will be called when iteration is complete.
  *          onCancel {function} Will be called if the process is canceled.
  *          threshold {int} How long to process before yielding, in ms.
  */
 function UpdateProcess(win, generator, options) {
   this.win = win;
   this.iter = _Iterator(generator);
-  this.onItem = options.onItem || function() {};
-  this.onBatch = options.onBatch || function() {};
-  this.onDone = options.onDone || function() {};
-  this.onCancel = options.onCancel || function() {};
+  this.onItem = options.onItem || function () {};
+  this.onBatch = options.onBatch || function () {};
+  this.onDone = options.onDone || function () {};
+  this.onCancel = options.onCancel || function () {};
   this.threshold = options.threshold || 45;
 
   this.canceled = false;
 }
 
 UpdateProcess.prototype = {
   /**
    * Schedule a new batch on the main loop.
    */
-  schedule: function() {
+  schedule: function () {
     if (this.canceled) {
       return;
     }
     this._timeout = setTimeout(this._timeoutHandler.bind(this), 0);
   },
 
   /**
    * Cancel the running process.  onItem will not be called again,
    * and onCancel will be called.
    */
-  cancel: function() {
+  cancel: function () {
     if (this._timeout) {
       clearTimeout(this._timeout);
       this._timeout = 0;
     }
     this.canceled = true;
     this.onCancel();
   },
 
-  _timeoutHandler: function() {
+  _timeoutHandler: function () {
     this._timeout = null;
     try {
       this._runBatch();
       this.schedule();
-    } catch(e) {
+    } catch (e) {
       if (e instanceof StopIteration) {
         this.onBatch();
         this.onDone();
         return;
       }
       console.error(e);
       throw e;
     }
   },
 
-  _runBatch: function() {
+  _runBatch: function () {
     let time = Date.now();
     while (!this.canceled) {
       // Continue until iter.next() throws...
       let next = this.iter.next();
       this.onItem(next[1]);
       if ((Date.now() - time) > this.threshold) {
         this.onBatch();
         return;
@@ -219,17 +219,17 @@ function CssComputedView(inspector, docu
 
 /**
  * Memoized lookup of a l10n string from a string bundle.
  *
  * @param {String} name
  *        The key to lookup.
  * @returns {String} localized version of the given key.
  */
-CssComputedView.l10n = function(name) {
+CssComputedView.l10n = function (name) {
   try {
     return CssComputedView._strings.GetStringFromName(name);
   } catch (ex) {
     Services.console.logStringMessage("Error reading '" + name + "'");
     throw new Error("l10n error with " + name);
   }
 };
 
@@ -244,40 +244,40 @@ CssComputedView.prototype = {
   _panelRefreshTimeout: null,
 
   // Toggle for zebra striping
   _darkStripe: true,
 
   // Number of visible properties
   numVisibleProperties: 0,
 
-  setPageStyle: function(pageStyle) {
+  setPageStyle: function (pageStyle) {
     this.pageStyle = pageStyle;
   },
 
   get includeBrowserStyles() {
     return this.includeBrowserStylesCheckbox.checked;
   },
 
-  _handlePrefChange: function(event, data) {
+  _handlePrefChange: function (event, data) {
     if (this._computed && (data.pref === "devtools.defaultColorUnit" ||
         data.pref === PREF_ORIG_SOURCES)) {
       this.refreshPanel();
     }
   },
 
   /**
    * Update the view with a new selected element. The CssComputedView panel
    * will show the style information for the given element.
    *
    * @param {NodeFront} element
    *        The highlighted node to get styles for.
    * @returns a promise that will be resolved when highlighting is complete.
    */
-  selectElement: function(element) {
+  selectElement: function (element) {
     if (!element) {
       this.viewedElement = null;
       this.noResults.hidden = false;
 
       if (this._refreshProcess) {
         this._refreshProcess.cancel();
       }
       // Hiding all properties
@@ -303,17 +303,17 @@ CssComputedView.prototype = {
    * @param {DOMNode} node
    *        The node which we want information about
    * @return {Object} The type information object contains the following props:
    * - type {String} One of the VIEW_NODE_XXX_TYPE const in
    *   style-inspector-overlays
    * - value {Object} Depends on the type of the node
    * returns null if the node isn't anything we care about
    */
-  getNodeInfo: function(node) {
+  getNodeInfo: function (node) {
     if (!node) {
       return null;
     }
 
     let classes = node.classList;
 
     // Check if the node isn't a selector first since this doesn't require
     // walking the DOM
@@ -383,60 +383,61 @@ CssComputedView.prototype = {
       value.url = node.href;
     } else {
       return null;
     }
 
     return {type, value};
   },
 
-  _createPropertyViews: function() {
+  _createPropertyViews: function () {
     if (this._createViewsPromise) {
       return this._createViewsPromise;
     }
 
     let deferred = promise.defer();
     this._createViewsPromise = deferred.promise;
 
     this.refreshSourceFilter();
     this.numVisibleProperties = 0;
     let fragment = this.styleDocument.createDocumentFragment();
 
     this._createViewsProcess = new UpdateProcess(
       this.styleWindow, CssComputedView.propertyNames, {
-      onItem: (propertyName) => {
-        // Per-item callback.
-        let propView = new PropertyView(this, propertyName);
-        fragment.appendChild(propView.buildMain());
-        fragment.appendChild(propView.buildSelectorContainer());
+        onItem: (propertyName) => {
+          // Per-item callback.
+          let propView = new PropertyView(this, propertyName);
+          fragment.appendChild(propView.buildMain());
+          fragment.appendChild(propView.buildSelectorContainer());
 
-        if (propView.visible) {
-          this.numVisibleProperties++;
+          if (propView.visible) {
+            this.numVisibleProperties++;
+          }
+          this.propertyViews.push(propView);
+        },
+        onCancel: () => {
+          deferred.reject("_createPropertyViews cancelled");
+        },
+        onDone: () => {
+          // Completed callback.
+          this.element.appendChild(fragment);
+          this.noResults.hidden = this.numVisibleProperties > 0;
+          deferred.resolve(undefined);
         }
-        this.propertyViews.push(propView);
-      },
-      onCancel: () => {
-        deferred.reject("_createPropertyViews cancelled");
-      },
-      onDone: () => {
-        // Completed callback.
-        this.element.appendChild(fragment);
-        this.noResults.hidden = this.numVisibleProperties > 0;
-        deferred.resolve(undefined);
       }
-    });
+    );
 
     this._createViewsProcess.schedule();
     return deferred.promise;
   },
 
   /**
    * Refresh the panel content.
    */
-  refreshPanel: function() {
+  refreshPanel: function () {
     if (!this.viewedElement) {
       return promise.resolve();
     }
 
     // Capture the current viewed element to return from the promise handler
     // early if it changed
     let viewedElement = this.viewedElement;
 
@@ -470,43 +471,46 @@ CssComputedView.prototype = {
       this.numVisibleProperties = 0;
 
       // Reset zebra striping.
       this._darkStripe = true;
 
       let deferred = promise.defer();
       this._refreshProcess = new UpdateProcess(
         this.styleWindow, this.propertyViews, {
-        onItem: (propView) => {
-          propView.refresh();
-        },
-        onDone: () => {
-          this._refreshProcess = null;
-          this.noResults.hidden = this.numVisibleProperties > 0;
+          onItem: (propView) => {
+            propView.refresh();
+          },
+          onDone: () => {
+            this._refreshProcess = null;
+            this.noResults.hidden = this.numVisibleProperties > 0;
 
-          if (this.searchField.value.length > 0 && !this.numVisibleProperties) {
-            this.searchField.classList.add("devtools-style-searchbox-no-match");
-          } else {
-            this.searchField.classList
-              .remove("devtools-style-searchbox-no-match");
+            if (this.searchField.value.length > 0 &&
+                !this.numVisibleProperties) {
+              this.searchField.classList
+                              .add("devtools-style-searchbox-no-match");
+            } else {
+              this.searchField.classList
+                              .remove("devtools-style-searchbox-no-match");
+            }
+
+            this.inspector.emit("computed-view-refreshed");
+            deferred.resolve(undefined);
           }
-
-          this.inspector.emit("computed-view-refreshed");
-          deferred.resolve(undefined);
         }
-      });
+      );
       this._refreshProcess.schedule();
       return deferred.promise;
     }).then(null, (err) => console.error(err));
   },
 
   /**
    * Handle the keypress event in the computed view.
    */
-  _onKeypress: function(event) {
+  _onKeypress: function (event) {
     if (!event.target.closest("#sidebar-panel-computedview")) {
       return;
     }
     let isOSX = Services.appinfo.OS === "Darwin";
 
     if (((isOSX && event.metaKey && !event.ctrlKey && !event.altKey) ||
         (!isOSX && event.ctrlKey && !event.metaKey && !event.altKey)) &&
         event.key === "f") {
@@ -515,26 +519,26 @@ CssComputedView.prototype = {
     }
   },
 
   /**
    * Set the filter style search value.
    * @param {String} value
    *        The search value.
    */
-  setFilterStyles: function(value="") {
+  setFilterStyles: function (value = "") {
     this.searchField.value = value;
     this.searchField.focus();
     this._onFilterStyles();
   },
 
   /**
    * Called when the user enters a search term in the filter style search box.
    */
-  _onFilterStyles: function() {
+  _onFilterStyles: function () {
     if (this._filterChangedTimeout) {
       clearTimeout(this._filterChangedTimeout);
     }
 
     let filterTimeout = (this.searchField.value.length > 0)
       ? FILTER_CHANGED_TIMEOUT : 0;
     this.searchClearButton.hidden = this.searchField.value.length === 0;
 
@@ -549,82 +553,82 @@ CssComputedView.prototype = {
       this._filterChangeTimeout = null;
     }, filterTimeout);
   },
 
   /**
    * Handle the search box's keypress event. If the escape key is pressed,
    * clear the search box field.
    */
-  _onFilterKeyPress: function(event) {
+  _onFilterKeyPress: function (event) {
     if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE &&
         this._onClearSearch()) {
       event.preventDefault();
       event.stopPropagation();
     }
   },
 
   /**
    * Context menu handler for filter style search box.
    */
-  _onFilterTextboxContextMenu: function(event) {
+  _onFilterTextboxContextMenu: function (event) {
     try {
       this.styleDocument.defaultView.focus();
       let contextmenu = this.inspector.toolbox.textboxContextMenuPopup;
       contextmenu.openPopupAtScreen(event.screenX, event.screenY, true);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   },
 
   /**
    * Called when the user clicks on the clear button in the filter style search
    * box. Returns true if the search box is cleared and false otherwise.
    */
-  _onClearSearch: function() {
+  _onClearSearch: function () {
     if (this.searchField.value) {
       this.setFilterStyles("");
       return true;
     }
 
     return false;
   },
 
   /**
    * The change event handler for the includeBrowserStyles checkbox.
    */
-  _onIncludeBrowserStyles: function() {
+  _onIncludeBrowserStyles: function () {
     this.refreshSourceFilter();
     this.refreshPanel();
   },
 
   /**
    * When includeBrowserStylesCheckbox.checked is false we only display
    * properties that have matched selectors and have been included by the
    * document or one of thedocument's stylesheets. If .checked is false we
    * display all properties including those that come from UA stylesheets.
    */
-  refreshSourceFilter: function() {
+  refreshSourceFilter: function () {
     this._matchedProperties = null;
     this._sourceFilter = this.includeBrowserStyles ?
                                  CssLogic.FILTER.UA :
                                  CssLogic.FILTER.USER;
   },
 
-  _onSourcePrefChanged: function() {
+  _onSourcePrefChanged: function () {
     for (let propView of this.propertyViews) {
       propView.updateSourceLinks();
     }
     this.inspector.emit("computed-view-sourcelinks-updated");
   },
 
   /**
    * The CSS as displayed by the UI.
    */
-  createStyleViews: function() {
+  createStyleViews: function () {
     if (CssComputedView.propertyNames) {
       return;
     }
 
     CssComputedView.propertyNames = [];
 
     // Here we build and cache a list of css properties supported by the browser
     // We could use any element but let's use the main document's root element
@@ -664,54 +668,54 @@ CssComputedView.prototype = {
    */
   get matchedProperties() {
     return this._matchedProperties || new Set();
   },
 
   /**
    * Focus the window on mousedown.
    */
-  focusWindow: function() {
+  focusWindow: function () {
     let win = this.styleDocument.defaultView;
     win.focus();
   },
 
   /**
    * Context menu handler.
    */
-  _onContextMenu: function(event) {
+  _onContextMenu: function (event) {
     this._contextmenu.show(event);
   },
 
-  _onClick: function(event) {
+  _onClick: function (event) {
     let target = event.target;
 
     if (target.nodeName === "a") {
       event.stopPropagation();
       event.preventDefault();
       let browserWin = this.inspector.target.tab.ownerDocument.defaultView;
       browserWin.openUILinkIn(target.href, "tab");
     }
   },
 
   /**
    * Callback for copy event. Copy selected text.
    *
    * @param {Event} event
    *        copy event object.
    */
-  _onCopy: function(event) {
+  _onCopy: function (event) {
     this.copySelection();
     event.preventDefault();
   },
 
   /**
    * Copy the current selection to the clipboard
    */
-  copySelection: function() {
+  copySelection: function () {
     try {
       let win = this.styleDocument.defaultView;
       let text = win.getSelection().toString().trim();
 
       // Tidy up block headings by moving CSS property names and their
       // values onto the same line and inserting a colon between them.
       let textArray = text.split(/[\r\n]+/);
       let result = "";
@@ -728,25 +732,25 @@ CssComputedView.prototype = {
           }
         }
       } else {
         // Short text fragment.
         result = textArray[0];
       }
 
       clipboardHelper.copyString(result);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   },
 
   /**
    * Destructor for CssComputedView.
    */
-  destroy: function() {
+  destroy: function () {
     this.viewedElement = null;
     this._outputParser = null;
 
     gDevTools.off("pref-changed", this._handlePrefChange);
 
     this._prefObserver.off(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
     this._prefObserver.destroy();
 
@@ -808,16 +812,17 @@ function PropertyInfo(tree, name) {
 }
 
 PropertyInfo.prototype = {
   get value() {
     if (this.tree._computed) {
       let value = this.tree._computed[this.name].value;
       return value;
     }
+    return null;
   }
 };
 
 /**
  * A container to give easy access to property data from the template engine.
  *
  * @param {CssComputedView} tree
  *        The CssComputedView instance we are working with.
@@ -937,17 +942,17 @@ PropertyView.prototype = {
     return "property-content-hidden";
   },
 
   /**
    * Build the markup for on computed style
    *
    * @return {Element}
    */
-  buildMain: function() {
+  buildMain: function () {
     let doc = this.tree.styleDocument;
 
     // Build the container element
     this.onMatchedToggle = this.onMatchedToggle.bind(this);
     this.element = doc.createElementNS(HTML_NS, "div");
     this.element.setAttribute("class", this.propertyHeaderClassName);
     this.element.addEventListener("dblclick", this.onMatchedToggle, false);
 
@@ -1001,31 +1006,31 @@ PropertyView.prototype = {
     this.valueNode.setAttribute("dir", "ltr");
     // Make it hand over the focus to the container
     this.valueNode.addEventListener("click", this.onFocus, false);
     valueContainer.appendChild(this.valueNode);
 
     return this.element;
   },
 
-  buildSelectorContainer: function() {
+  buildSelectorContainer: function () {
     let doc = this.tree.styleDocument;
     let element = doc.createElementNS(HTML_NS, "div");
     element.setAttribute("class", this.propertyContentClassName);
     this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "div");
     this.matchedSelectorsContainer.setAttribute("class", "matchedselectors");
     element.appendChild(this.matchedSelectorsContainer);
 
     return element;
   },
 
   /**
    * Refresh the panel's CSS property value.
    */
-  refresh: function() {
+  refresh: function () {
     this.element.className = this.propertyHeaderClassName;
     this.element.nextElementSibling.className = this.propertyContentClassName;
 
     if (this.prevViewedElement !== this.tree.viewedElement) {
       this._matchedSelectorViews = null;
       this.prevViewedElement = this.tree.viewedElement;
     }
 
@@ -1052,17 +1057,17 @@ PropertyView.prototype = {
     this.valueNode.appendChild(frag);
 
     this.refreshMatchedSelectors();
   },
 
   /**
    * Refresh the panel matched rules.
    */
-  refreshMatchedSelectors: function() {
+  refreshMatchedSelectors: function () {
     let hasMatchedSelectors = this.hasMatchedSelectors;
     this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
 
     if (hasMatchedSelectors) {
       this.matchedExpander.classList.add("expandable");
     } else {
       this.matchedExpander.classList.remove("expandable");
     }
@@ -1089,17 +1094,17 @@ PropertyView.prototype = {
     this.tree.inspector.emit("computed-view-property-collapsed");
     return promise.resolve(undefined);
   },
 
   get matchedSelectors() {
     return this._matchedSelectorResponse;
   },
 
-  _buildMatchedSelectors: function() {
+  _buildMatchedSelectors: function () {
     let promises = [];
     let frag = this.element.ownerDocument.createDocumentFragment();
 
     for (let selector of this.matchedSelectorViews) {
       let p = createChild(frag, "p");
       let span = createChild(p, "span", {
         class: "rule-link"
       });
@@ -1134,71 +1139,70 @@ PropertyView.prototype = {
 
   /**
    * Provide access to the matched SelectorViews that we are currently
    * displaying.
    */
   get matchedSelectorViews() {
     if (!this._matchedSelectorViews) {
       this._matchedSelectorViews = [];
-      this._matchedSelectorResponse.forEach(
-        function(selectorInfo) {
-          let selectorView = new SelectorView(this.tree, selectorInfo);
-          this._matchedSelectorViews.push(selectorView);
-        }, this);
+      this._matchedSelectorResponse.forEach(selectorInfo => {
+        let selectorView = new SelectorView(this.tree, selectorInfo);
+        this._matchedSelectorViews.push(selectorView);
+      }, this);
     }
     return this._matchedSelectorViews;
   },
 
   /**
    * Update all the selector source links to reflect whether we're linking to
    * original sources (e.g. Sass files).
    */
-  updateSourceLinks: function() {
+  updateSourceLinks: function () {
     if (!this._matchedSelectorViews) {
       return;
     }
     for (let view of this._matchedSelectorViews) {
       view.updateSourceLink();
     }
   },
 
   /**
    * The action when a user expands matched selectors.
    *
    * @param {Event} event
    *        Used to determine the class name of the targets click
    *        event.
    */
-  onMatchedToggle: function(event) {
+  onMatchedToggle: function (event) {
     if (event.shiftKey) {
       return;
     }
     this.matchedExpanded = !this.matchedExpanded;
     this.refreshMatchedSelectors();
     event.preventDefault();
   },
 
   /**
    * The action when a user clicks on the MDN help link for a property.
    */
-  mdnLinkClick: function(event) {
+  mdnLinkClick: function (event) {
     let inspector = this.tree.inspector;
 
     if (inspector.target.tab) {
       let browserWin = inspector.target.tab.ownerDocument.defaultView;
       browserWin.openUILinkIn(this.link, "tab");
     }
     event.preventDefault();
   },
 
   /**
    * Destroy this property view, removing event listeners
    */
-  destroy: function() {
+  destroy: function () {
     this.element.removeEventListener("dblclick", this.onMatchedToggle, false);
     this.element.removeEventListener("keydown", this.onKeyDown, false);
     this.element = null;
 
     this.matchedExpander.removeEventListener("click", this.onMatchedToggle,
                                              false);
     this.matchedExpander = null;
 
@@ -1244,17 +1248,17 @@ SelectorView.CLASS_NAMES = [
 SelectorView.prototype = {
   /**
    * Cache localized status names.
    *
    * These statuses are localized inside the styleinspector.properties string
    * bundle.
    * @see css-logic.js - the CssLogic.STATUS array.
    */
-  _cacheStatusNames: function() {
+  _cacheStatusNames: function () {
     if (SelectorView.STATUS_NAMES.length) {
       return;
     }
 
     for (let status in CssLogic.STATUS) {
       let i = CssLogic.STATUS[status];
       if (i > CssLogic.STATUS.UNMATCHED) {
         let value = CssComputedView.l10n("rule.status." + status);
@@ -1299,45 +1303,46 @@ SelectorView.prototype = {
     // Sadly, because this fragment is added to the template by DOM Templater
     // we lose any events that are attached. This means that URLs will open in a
     // new window. At some point we should fix this by stopping using the
     // templater.
     let outputParser = this.tree._outputParser;
     let frag = outputParser.parseCssProperty(
       this.selectorInfo.name,
       this.selectorInfo.value, {
-      colorSwatchClass: "computedview-colorswatch",
-      colorClass: "computedview-color",
-      urlClass: "theme-link",
-      baseURI: this.selectorInfo.rule.href
-    });
+        colorSwatchClass: "computedview-colorswatch",
+        colorClass: "computedview-color",
+        urlClass: "theme-link",
+        baseURI: this.selectorInfo.rule.href
+      }
+    );
     return frag;
   },
 
   /**
    * Update the text of the source link to reflect whether we're showing
    * original sources or not.
    */
-  updateSourceLink: function() {
+  updateSourceLink: function () {
     return this.updateSource().then((oldSource) => {
       if (oldSource !== this.source && this.tree.element) {
         let selector = '[sourcelocation="' + oldSource + '"]';
         let link = this.tree.element.querySelector(selector);
         if (link) {
           link.textContent = this.source;
           link.setAttribute("sourcelocation", this.source);
         }
       }
     });
   },
 
   /**
    * Update the 'source' store based on our original sources preference.
    */
-  updateSource: function() {
+  updateSource: function () {
     let rule = this.selectorInfo.rule;
     this.sheet = rule.parentStyleSheet;
 
     if (!rule || !this.sheet) {
       let oldSource = this.source;
       this.source = CssLogic.l10n("rule.sourceElement");
       return promise.resolve(oldSource);
     }
@@ -1362,32 +1367,32 @@ SelectorView.prototype = {
     let oldSource = this.source;
     this.source = CssLogic.shortSource(this.sheet) + ":" + rule.line;
     return promise.resolve(oldSource);
   },
 
   /**
    * Open the style editor if the RETURN key was pressed.
    */
-  maybeOpenStyleEditor: function(event) {
+  maybeOpenStyleEditor: function (event) {
     let keyEvent = Ci.nsIDOMKeyEvent;
     if (event.keyCode === keyEvent.DOM_VK_RETURN) {
       this.openStyleEditor();
     }
   },
 
   /**
    * When a css link is clicked this method is called in order to either:
    *   1. Open the link in view source (for chrome stylesheets).
    *   2. Open the link in the style editor.
    *
    *   We can only view stylesheets contained in document.styleSheets inside the
    *   style editor.
    */
-  openStyleEditor: function() {
+  openStyleEditor: function () {
     let inspector = this.tree.inspector;
     let rule = this.selectorInfo.rule;
 
     // The style editor can only display stylesheets coming from content because
     // chrome stylesheets are not listed in the editor's stylesheet selector.
     //
     // If the stylesheet is a content stylesheet we send it to the style
     // editor else we display it in the view source window.
@@ -1401,17 +1406,17 @@ SelectorView.prototype = {
     let location = promise.resolve(rule.location);
     if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
       location = rule.getOriginalLocation();
     }
 
     location.then(({source, href, line, column}) => {
       let target = inspector.target;
       if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
-        gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
+        gDevTools.showToolbox(target, "styleeditor").then(function (toolbox) {
           let sheet = source || href;
           toolbox.getCurrentPanel().selectStyleSheet(sheet, line, column);
         });
       }
     });
   }
 };
 
@@ -1437,24 +1442,24 @@ function ComputedViewTool(inspector, win
   this.inspector.walker.on("resize", this.onResized);
 
   this.view.selectElement(null);
 
   this.onSelected();
 }
 
 ComputedViewTool.prototype = {
-  isSidebarActive: function() {
+  isSidebarActive: function () {
     if (!this.view) {
       return false;
     }
     return this.inspector.sidebar.getCurrentTabID() == "computedview";
   },
 
-  onSelected: function(event) {
+  onSelected: function (event) {
     // Ignore the event if the view has been destroyed, or if it's inactive.
     // But only if the current selection isn't null. If it's been set to null,
     // let the update go through as this is needed to empty the view on
     // navigation.
     if (!this.view) {
       return;
     }
 
@@ -1475,53 +1480,53 @@ ComputedViewTool.prototype = {
     if (!event || event == "new-node-front") {
       let done = this.inspector.updating("computed-view");
       this.view.selectElement(this.inspector.selection.nodeFront).then(() => {
         done();
       });
     }
   },
 
-  refresh: function() {
+  refresh: function () {
     if (this.isSidebarActive()) {
       this.view.refreshPanel();
     }
   },
 
-  onPanelSelected: function() {
+  onPanelSelected: function () {
     if (this.inspector.selection.nodeFront === this.view.viewedElement) {
       this.refresh();
     } else {
       this.onSelected();
     }
   },
 
   /**
    * When markup mutations occur, if an attribute of the selected node changes,
    * we need to refresh the view as that might change the node's styles.
    */
-  onMutations: function(mutations) {
+  onMutations: function (mutations) {
     for (let {type, target} of mutations) {
       if (target === this.inspector.selection.nodeFront &&
           type === "attributes") {
         this.refresh();
         break;
       }
     }
   },
 
   /**
    * When the window gets resized, this may cause media-queries to match, and
    * therefore, different styles may apply.
    */
-  onResized: function() {
+  onResized: function () {
     this.refresh();
   },
 
-  destroy: function() {
+  destroy: function () {
     this.inspector.walker.off("mutations", this.onMutations);
     this.inspector.walker.off("resize", this.onResized);
     this.inspector.sidebar.off("computedview-selected", this.refresh);
     this.inspector.selection.off("pseudoclass", this.refresh);
     this.inspector.selection.off("new-node-front", this.onSelected);
     this.inspector.selection.off("detached", this.onSelected);
     this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
     if (this.inspector.pageStyle) {
--- a/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
+++ b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   info("Checking the default styles");
   is(isPropertyVisible("color", view), true,
     "span #matches color property is visible");
   is(isPropertyVisible("background-color", view), false,
--- a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #f00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   info("Checking the property itself");
   let container = getComputedViewPropertyView(view, "color").valueNode;
   checkColorCycling(container, view);
 
--- a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -44,132 +44,132 @@ const TEST_URI = `
 // - desc {String} will be logged for information
 // - getHoveredNode {Generator Function} received the computed-view instance as
 //   argument and must return the node to be tested
 // - assertNodeInfo {Function} should check the validity of the nodeInfo
 //   argument it receives
 const TEST_DATA = [
   {
     desc: "Testing a null node",
-    getHoveredNode: function*() {
+    getHoveredNode: function* () {
       return null;
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo, null);
     }
   },
   {
     desc: "Testing a useless node",
-    getHoveredNode: function*(view) {
+    getHoveredNode: function* (view) {
       return view.element;
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo, null);
     }
   },
   {
     desc: "Testing a property name",
-    getHoveredNode: function*(view) {
+    getHoveredNode: function* (view) {
       return getComputedViewProperty(view, "color").nameSpan;
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
     }
   },
   {
     desc: "Testing a property value",
-    getHoveredNode: function*(view) {
+    getHoveredNode: function* (view) {
       return getComputedViewProperty(view, "color").valueSpan;
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "rgb(255, 0, 0)");
     }
   },
   {
     desc: "Testing an image url",
-    getHoveredNode: function*(view) {
+    getHoveredNode: function* (view) {
       let {valueSpan} = getComputedViewProperty(view, "background-image");
       return valueSpan.querySelector(".theme-link");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "background-image");
       is(nodeInfo.value.value,
          "url(\"chrome://global/skin/icons/warning-64.png\")");
       is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
     }
   },
   {
     desc: "Testing a matched rule selector (bestmatch)",
-    getHoveredNode: function*(view) {
-      let content = yield getComputedViewMatchedRules(view, "background-color");
-      return content.querySelector(".bestmatch");
+    getHoveredNode: function* (view) {
+      let el = yield getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".bestmatch");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div div");
     }
   },
   {
     desc: "Testing a matched rule selector (matched)",
-    getHoveredNode: function*(view) {
-      let content = yield getComputedViewMatchedRules(view, "background-color");
-      return content.querySelector(".matched");
+    getHoveredNode: function* (view) {
+      let el = yield getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".matched");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "div");
     }
   },
   {
     desc: "Testing a matched rule selector (parentmatch)",
-    getHoveredNode: function*(view) {
-      let content = yield getComputedViewMatchedRules(view, "color");
-      return content.querySelector(".parentmatch");
+    getHoveredNode: function* (view) {
+      let el = yield getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".parentmatch");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "body");
     }
   },
   {
     desc: "Testing a matched rule value",
-    getHoveredNode: function*(view) {
-      let content = yield getComputedViewMatchedRules(view, "color");
-      return content.querySelector(".other-property-value");
+    getHoveredNode: function* (view) {
+      let el = yield getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".other-property-value");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "red");
     }
   },
   {
     desc: "Testing a matched rule stylesheet link",
-    getHoveredNode: function*(view) {
-      let content = yield getComputedViewMatchedRules(view, "color");
-      return content.querySelector(".rule-link .theme-link");
+    getHoveredNode: function* (view) {
+      let el = yield getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".rule-link .theme-link");
     },
-    assertNodeInfo: function(nodeInfo) {
+    assertNodeInfo: function (nodeInfo) {
       is(nodeInfo, null);
     }
   }
 ];
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#testElement", inspector);
 
   for (let {desc, getHoveredNode, assertNodeInfo} of TEST_DATA) {
     info(desc);
     let nodeInfo = view.getNodeInfo(yield getHoveredNode(view));
     assertNodeInfo(nodeInfo);
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode(".matches", inspector);
 
   let propView = getFirstVisiblePropertyView(view);
   let rulesTable = propView.matchedSelectorsContainer;
   let matchedExpander = propView.element;
 
@@ -67,16 +67,16 @@ function* checkToggleKeyBinding(win, key
   is(rulesTable.innerHTML, "", "The property has been collapsed");
 }
 
 function checkHelpLinkKeybinding(view) {
   info("Check that MDN link is opened on \"F1\"");
   let def = promise.defer();
 
   let propView = getFirstVisiblePropertyView(view);
-  propView.mdnLinkClick = function() {
+  propView.mdnLinkClick = function () {
     ok(true, "Pressing F1 opened the MDN link");
     def.resolve();
   };
 
   EventUtils.synthesizeKey("VK_F1", {}, view.styleWindow);
   return def.promise;
 }
--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -27,17 +27,17 @@ const TEST_URI = `
     you should go do something else instead. Maybe read a book. Or better
     yet, write some test-cases for another bit of code.
     <span style="font-style: italic">some text</span></p>
     <p id="closing">more text</p>
     <p>even more text</p>
   </div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("span", inspector);
 
   info("Selecting the first computed style in the list");
   let firstStyle = view.styleDocument.querySelector(".property-view");
   ok(firstStyle, "First computed style found in panel");
   firstStyle.focus();
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -10,17 +10,17 @@
 const TEST_URI = `
   <style type="text/css"> ,
     html { color: #000000; font-size: 15pt; }
     h1 { color: red; }
   </style>
   <h1>Some header text</h1>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("h1", inspector);
 
   yield testExpandOnTwistyClick(view, inspector);
   yield testCollapseOnTwistyClick(view, inspector);
   yield testExpandOnDblClick(view, inspector);
   yield testCollapseOnDblClick(view, inspector);
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
@@ -5,17 +5,17 @@
 "use strict";
 
 // Checking selector counts, matched rules and titles in the computed-view.
 
 const {PropertyView} =
       require("devtools/client/inspector/computed/computed");
 const TEST_URI = URL_ROOT + "doc_matched_selectors.html";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab(TEST_URI);
   let {inspector, view} = yield openComputedView();
 
   yield selectNode("#test", inspector);
   yield testMatchedSelectors(view, inspector);
 });
 
 function* testMatchedSelectors(view, inspector) {
--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
@@ -1,17 +1,17 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests for matched selector texts in the computed view.
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
   let {inspector, view} = yield openComputedView();
   yield selectNode("div", inspector);
 
   info("Checking the color property view");
   let propertyView = getPropertyView(view, "color");
   ok(propertyView, "found PropertyView for color");
   is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true");
@@ -25,17 +25,17 @@ add_task(function*() {
   ok(span, "Found the first table row");
 
   let selector = propertyView.matchedSelectorViews[0];
   ok(selector, "Found the first matched selector view");
 });
 
 function getPropertyView(computedView, name) {
   let propertyView = null;
-  computedView.propertyViews.some(function(view) {
+  computedView.propertyViews.some(function (view) {
     if (view.name == name) {
       propertyView = view;
       return true;
     }
     return false;
   });
   return propertyView;
 }
--- a/devtools/client/inspector/computed/test/browser_computed_media-queries.js
+++ b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
@@ -5,19 +5,18 @@
 "use strict";
 
 // Tests that we correctly display appropriate media query titles in the
 // property view.
 
 const TEST_URI = URL_ROOT + "doc_media_queries.html";
 
 var {PropertyView} = require("devtools/client/inspector/computed/computed");
-var {CssLogic} = require("devtools/shared/inspector/css-logic");
 
-add_task(function*() {
+add_task(function* () {
   yield addTab(TEST_URI);
   let {inspector, view} = yield openComputedView();
   yield selectNode("div", inspector);
   yield checkPropertyView(view);
 });
 
 function checkPropertyView(view) {
   let propertyView = new PropertyView(view, "width");
--- a/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
+++ b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   yield enterInvalidFilter(inspector, view);
   checkNoResultsPlaceholderShown(view);
 
   yield clearFilterText(inspector, view);
--- a/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
+++ b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
@@ -7,17 +7,17 @@
 // Tests that the computed view shows the original source link when source maps
 // are enabled.
 
 const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
 const PREF = "devtools.styleeditor.source-maps-enabled";
 const SCSS_LOC = "doc_sourcemaps.scss:4";
 const CSS_LOC = "doc_sourcemaps.css:1";
 
-add_task(function*() {
+add_task(function* () {
   info("Turning the pref " + PREF + " on");
   Services.prefs.setBoolPref(PREF, true);
 
   yield addTab(TESTCASE_URI);
   let {toolbox, inspector, view} = yield openComputedView();
   yield selectNode("div", inspector);
 
   info("Expanding the first property");
--- a/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that pseudoelements are displayed correctly in the rule view.
 
 const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab(TEST_URI);
   let {inspector, view} = yield openComputedView();
   yield testTopLeft(inspector, view);
 });
 
 function* testTopLeft(inspector, view) {
   let node = yield getNodeFront("#topleft", inspector.markup);
   yield selectNode(node, inspector);
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
   yield testToggleDefaultStyles(inspector, view);
   yield testAddTextInFilter(inspector, view);
 });
 
 function* testToggleDefaultStyles(inspector, computedView) {
@@ -32,30 +32,31 @@ function* testToggleDefaultStyles(inspec
 }
 
 function* testAddTextInFilter(inspector, computedView) {
   info("setting filter text to \"color\"");
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
   let win = computedView.styleWindow;
 
-  // First check to make sure that accel + F doesn't focus search if the container
-  // isn't focused
+  // First check to make sure that accel + F doesn't focus search if the
+  // container isn't focused
   inspector.panelWin.focus();
   EventUtils.synthesizeKey("f", { accelKey: true });
-  isnot(inspector.panelDoc.activeElement, searchField, "Search field isn't focused");
+  isnot(inspector.panelDoc.activeElement, searchField,
+        "Search field isn't focused");
 
   computedView.element.focus();
   EventUtils.synthesizeKey("f", { accelKey: true });
   is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
 
   synthesizeKeys("color", win);
   yield onRefreshed;
 
   info("check that the correct properties are visible");
 
   let propertyViews = computedView.propertyViews;
-  propertyViews.forEach(function(propView) {
+  propertyViews.forEach(propView => {
     let name = propView.name;
     is(propView.visible, name.indexOf("color") > -1,
       "span " + name + " property visibility check");
   });
 }
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -12,17 +12,17 @@ const TEST_URI = `
       color: #F00;
       background-color: #00F;
       border-color: #0F0;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
   yield testAddTextInFilter(inspector, view);
   yield testClearSearchFilter(inspector, view);
 });
 
 function* testAddTextInFilter(inspector, computedView) {
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
@@ -5,17 +5,17 @@
 "use strict";
 
 // Tests computed view search filter context menu works properly.
 
 const TEST_INPUT = "h1";
 
 const TEST_URI = "<h1>test filter context menu</h1>";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openComputedView();
   yield selectNode("h1", inspector);
 
   let win = view.styleWindow;
   let searchField = view.searchField;
   let searchContextMenu = toolbox.textboxContextMenuPopup;
   ok(searchContextMenu,
--- a/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     .matches {
       color: #F00;
     }
   </style>
   <span id="matches" class="matches">Some styled text</span>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
   yield testAddTextInFilter(inspector, view);
   yield testEscapeKeypress(inspector, view);
 });
 
 function* testAddTextInFilter(inspector, computedView) {
--- a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles.js
@@ -1,17 +1,17 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Tests that properties can be selected and copied from the computed view.
 
-XPCOMUtils.defineLazyGetter(this, "osString", function() {
+XPCOMUtils.defineLazyGetter(this, "osString", function () {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
 const TEST_URI = `
   <style type="text/css">
     span {
       font-variant-caps: small-caps;
       color: #000000;
@@ -31,17 +31,17 @@ const TEST_URI = `
     you should go do something else instead. Maybe read a book. Or better
     yet, write some test-cases for another bit of code.
     <span style="font-style: italic">some text</span></p>
     <p id="closing">more text</p>
     <p>even more text</p>
   </div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("span", inspector);
   yield checkCopySelection(view);
   yield checkSelectAll(view);
 });
 
 function* checkCopySelection(view) {
--- a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
+++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
@@ -1,61 +1,56 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-///////////////////
-//
 // Whitelisting this test.
 // As part of bug 1077403, the leaking uncaught rejection should be fixed.
-//
 thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source");
 
 // Tests the links from the computed view to the style editor.
 
 const STYLESHEET_URL = "data:text/css," + encodeURIComponent(
-  [".highlight {",
-   "color: blue",
-   "}"].join("\n"));
+  ".highlight {color: blue}");
 
 const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(
-  ['<html>' +
-   '<head>' +
-   '<title>Computed view style editor link test</title>',
-   '<style type="text/css"> ',
-   'html { color: #000000; } ',
-   'span { font-variant: small-caps; color: #000000; } ',
-   '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ',
-   'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">',
-   '</style>',
-   '<style>',
-   'div { color: #f06; }',
-   '</style>',
-   '<link rel="stylesheet" type="text/css" href="' + STYLESHEET_URL + '">',
-   '</head>',
-   '<body>',
-   '<h1>Some header text</h1>',
-   '<p id="salutation" style="font-size: 12pt">hi.</p>',
-   '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ',
-   'solely to provide some things to ',
-   '<span style="color: yellow" class="highlight">',
-   'highlight</span> and <span style="font-weight: bold">count</span> ',
-   'style list-items in the box at right. If you are reading this, ',
-   'you should go do something else instead. Maybe read a book. Or better ',
-   'yet, write some test-cases for another bit of code. ',
-   '<span style="font-style: italic">some text</span></p>',
-   '<p id="closing">more text</p>',
-   '<p>even more text</p>',
-   '</div>',
-   '</body>',
-   '</html>'].join("\n"));
+  `<html>
+   <head>
+   <title>Computed view style editor link test</title>
+   <style type="text/css">
+   html { color: #000000; }
+   span { font-variant: small-caps; color: #000000; }
+   .nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em;
+   font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+   </style>
+   <style>
+   div { color: #f06; }
+   </style>
+   <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
+   </head>
+   <body>
+   <h1>Some header text</h1>
+   <p id="salutation" style="font-size: 12pt">hi.</p>
+   <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+   solely to provide some things to
+   <span style="color: yellow" class="highlight">
+   highlight</span> and <span style="font-weight: bold">count</span>
+   style list-items in the box at right. If you are reading this,
+   you should go do something else instead. Maybe read a book. Or better
+   yet, write some test-cases for another bit of code.
+   <span style="font-style: italic">some text</span></p>
+   <p id="closing">more text</p>
+   <p>even more text</p>
+   </div>
+   </body>
+   </html>`);
 
-add_task(function*() {
+add_task(function* () {
   yield addTab(DOCUMENT_URL);
   let {toolbox, inspector, view, testActor} = yield openComputedView();
   yield selectNode("span", inspector);
 
   yield testInlineStyle(view);
   yield testFirstInlineStyleSheet(view, toolbox, testActor);
   yield testSecondInlineStyleSheet(view, toolbox, testActor);
   yield testExternalStyleSheet(view, toolbox, testActor);
--- a/devtools/client/inspector/computed/test/doc_media_queries.html
+++ b/devtools/client/inspector/computed/test/doc_media_queries.html
@@ -1,14 +1,11 @@
 <html>
 <head>
   <title>test</title>
-  <script type="application/javascript;version=1.7">
-
-  </script>
   <style>
     div {
       width: 1000px;
       height: 100px;
       background-color: #f00;
     }
 
     @media screen and (min-width: 1px) {
--- a/devtools/client/inspector/computed/test/head.js
+++ b/devtools/client/inspector/computed/test/head.js
@@ -1,11 +1,13 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from ../../test/head.js */
 "use strict";
 
 // Import the inspector's head.js first (which itself imports shared-head.js).
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 registerCleanupFunction(() => {
@@ -75,17 +77,17 @@ function getComputedViewPropertyView(vie
  *
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} name
  *        The name of the property to retrieve
  * @return {Promise} A promise that resolves to the property matched rules
  * container
  */
-var getComputedViewMatchedRules = Task.async(function*(view, name) {
+var getComputedViewMatchedRules = Task.async(function* (view, name) {
   let expander;
   let propertyContent;
   for (let property of view.styleDocument.querySelectorAll(".property-view")) {
     let nameSpan = property.querySelector(".property-name");
     if (nameSpan.textContent === name) {
       expander = property.querySelector(".expandable");
       propertyContent = property.nextSibling;
       break;