Bug 1267015 - ESLint cleanup of devtools/client/styleinspector/shared/test; r=bgrins
authorPatrick Brosset <pbrosset@mozilla.com>
Fri, 13 May 2016 10:16:45 +0200
changeset 336312 c4a209a8e2a8483f71182ecfa6044b830fd85362
parent 336311 2bc2f386191bf31c11c74ab05a837876d1d896cd
child 336313 cecc6f0f056069ec9f765a0d513c2226001f144f
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)
reviewersbgrins
bugs1267015
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 1267015 - ESLint cleanup of devtools/client/styleinspector/shared/test; r=bgrins MozReview-Commit-ID: GKnRmlqIBxb
.eslintignore
devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
devtools/client/inspector/shared/test/doc_author-sheet.html
devtools/client/inspector/shared/test/doc_content_stylesheet.html
devtools/client/inspector/shared/test/doc_frame_script.js
devtools/client/inspector/shared/test/head.js
--- a/.eslintignore
+++ b/.eslintignore
@@ -79,17 +79,16 @@ browser/extensions/loop/**
 devtools/client/canvasdebugger/**
 devtools/client/commandline/**
 devtools/client/debugger/**
 devtools/client/eyedropper/**
 devtools/client/framework/**
 # devtools/client/inspector/shared/*.js files are eslint-clean, so they aren't
 # included in the ignore list.
 devtools/client/inspector/fonts/**
-devtools/client/inspector/shared/test/**
 devtools/client/inspector/test/**
 devtools/client/inspector/*.js
 !devtools/client/inspector/breadcrumbs.js
 devtools/client/jsonview/lib/**
 devtools/client/memory/**
 devtools/client/netmonitor/test/**
 devtools/client/netmonitor/har/test/**
 devtools/client/performance/**
--- a/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_context-menu-copy-urls.js
@@ -6,109 +6,126 @@
 /* Tests both Copy URL and Copy Data URL context menu items */
 
 const PROPERTIES_URL = "chrome://devtools-shared/locale/styleinspector.properties";
 const TEST_DATA_URI = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
 
 // Invalid URL still needs to be reachable otherwise getImageDataUrl will
 // timeout.  DevTools chrome:// URLs aren't content accessible, so use some
 // random resource:// URL here.
-const INVALID_IMAGE_URI =
-  "resource://devtools/client/definitions.js";
+const INVALID_IMAGE_URI = "resource://devtools/client/definitions.js";
 
 const ERROR_MESSAGE = Services.strings
   .createBundle(PROPERTIES_URL)
   .GetStringFromName("styleinspector.copyImageDataUrlError");
 
-add_task(function*() {
-  const PAGE_CONTENT = [
-    "<style type=\"text/css\">",
-    "  .valid-background {",
-    "    background-image: url(" + TEST_DATA_URI + ");",
-    "  }",
-    "  .invalid-background {",
-    "    background-image: url(" + INVALID_IMAGE_URI + ");",
-    "  }",
-    "</style>",
-    "<div class=\"valid-background\">Valid background image</div>",
-    "<div class=\"invalid-background\">Invalid background image</div>"
-  ].join("\n");
+add_task(function* () {
+  const TEST_URI = `<style type="text/css">
+      .valid-background {
+        background-image: url(${TEST_DATA_URI});
+      }
+      .invalid-background {
+        background-image: url(${INVALID_IMAGE_URI});
+      }
+    </style>
+    <div class="valid-background">Valid background image</div>
+    <div class="invalid-background">Invalid background image</div>`;
 
-  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(PAGE_CONTENT));
+  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
 
   yield startTest();
 });
 
 function* startTest() {
   info("Opening rule view");
   let {inspector, view} = yield openRuleView();
 
   info("Test valid background image URL in rule view");
-  yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
-  yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+    ".valid-background", TEST_DATA_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "url",
+    ".valid-background", TEST_DATA_URI);
+
   info("Test invalid background image URL in rue view");
-  yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
-  yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+    ".invalid-background", ERROR_MESSAGE);
+  yield testCopyUrlToClipboard({view, inspector}, "url",
+    ".invalid-background", INVALID_IMAGE_URI);
 
   info("Opening computed view");
   view = selectComputedView(inspector);
 
   info("Test valid background image URL in computed view");
-  yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".valid-background", TEST_DATA_URI);
-  yield testCopyUrlToClipboard({view, inspector}, "url", ".valid-background", TEST_DATA_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+    ".valid-background", TEST_DATA_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "url",
+    ".valid-background", TEST_DATA_URI);
+
   info("Test invalid background image URL in computed view");
-  yield testCopyUrlToClipboard({view, inspector}, "data-uri", ".invalid-background", ERROR_MESSAGE);
-  yield testCopyUrlToClipboard({view, inspector}, "url", ".invalid-background", INVALID_IMAGE_URI);
+  yield testCopyUrlToClipboard({view, inspector}, "data-uri",
+    ".invalid-background", ERROR_MESSAGE);
+  yield testCopyUrlToClipboard({view, inspector}, "url",
+    ".invalid-background", INVALID_IMAGE_URI);
 }
 
 function* testCopyUrlToClipboard({view, inspector}, type, selector, expected) {
   info("Select node in inspector panel");
   yield selectNode(selector, inspector);
 
-  info("Retrieve background-image link for selected node in current styleinspector view");
+  info("Retrieve background-image link for selected node in current " +
+       "styleinspector view");
   let property = getBackgroundImageProperty(view, selector);
   let imageLink = property.valueSpan.querySelector(".theme-link");
   ok(imageLink, "Background-image link element found");
 
   info("Simulate right click on the background-image URL");
   let popup = once(view._contextmenu._menupopup, "popupshown");
 
-  // Cannot rely on synthesizeMouseAtCenter here. The image URL can be displayed on several lines.
-  // A click simulated at the exact center may click between the lines and miss the target
-  // Instead, using the top-left corner of first client rect, with an offset of 2 pixels.
+  // Cannot rely on synthesizeMouseAtCenter here. The image URL can be displayed
+  // on several lines. A click simulated at the exact center may click between
+  // the lines and miss the target. Instead, using the top-left corner of first
+  // client rect, with an offset of 2 pixels.
   let rect = imageLink.getClientRects()[0];
   let x = rect.left + 2;
   let y = rect.top + 2;
 
-  EventUtils.synthesizeMouseAtPoint(x, y, {button: 2, type: "contextmenu"}, getViewWindow(view));
+  EventUtils.synthesizeMouseAtPoint(x, y, {
+    button: 2,
+    type: "contextmenu"
+  }, getViewWindow(view));
   yield popup;
 
   info("Context menu is displayed");
-  ok(!view._contextmenu.menuitemCopyUrl.hidden, "\"Copy URL\" menu entry is displayed");
-  ok(!view._contextmenu.menuitemCopyImageDataUrl.hidden, "\"Copy Image Data-URL\" menu entry is displayed");
+  ok(!view._contextmenu.menuitemCopyUrl.hidden,
+     "\"Copy URL\" menu entry is displayed");
+  ok(!view._contextmenu.menuitemCopyImageDataUrl.hidden,
+     "\"Copy Image Data-URL\" menu entry is displayed");
 
   if (type == "data-uri") {
     info("Click Copy Data URI and wait for clipboard");
-    yield waitForClipboard(() => view._contextmenu.menuitemCopyImageDataUrl.click(), expected);
+    yield waitForClipboard(() => {
+      return view._contextmenu.menuitemCopyImageDataUrl.click();
+    }, expected);
   } else {
     info("Click Copy URL and wait for clipboard");
-    yield waitForClipboard(() => view._contextmenu.menuitemCopyUrl.click(), expected);
+    yield waitForClipboard(() => {
+      return view._contextmenu.menuitemCopyUrl.click();
+    }, expected);
   }
 
   info("Hide context menu");
   view._contextmenu._menupopup.hidePopup();
 }
 
 function getBackgroundImageProperty(view, selector) {
   let isRuleView = view instanceof CssRuleView;
   if (isRuleView) {
     return getRuleViewProperty(view, selector, "background-image");
-  } else {
-    return getComputedViewProperty(view, "background-image");
   }
+  return getComputedViewProperty(view, "background-image");
 }
 
 /**
  * Function that returns the window for a given view.
  */
 function getViewWindow(view) {
   let viewDocument = view.styleDocument ? view.styleDocument : view.doc;
   return viewDocument.defaultView;
--- a/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_csslogic-content-stylesheets.js
@@ -15,17 +15,17 @@ const TEST_URI_AUTHOR = TEST_URL_ROOT + 
 const TEST_URI_XUL = TEST_URL_ROOT + "doc_content_stylesheet.xul";
 const XUL_URI = Cc["@mozilla.org/network/io-service;1"]
                 .getService(Ci.nsIIOService)
                 .newURI(TEST_URI_XUL, null, null);
 var ssm = Components.classes["@mozilla.org/scriptsecuritymanager;1"]
                             .getService(Ci.nsIScriptSecurityManager);
 const XUL_PRINCIPAL = ssm.createCodebasePrincipal(XUL_URI, {});
 
-add_task(function*() {
+add_task(function* () {
   requestLongerTimeout(2);
 
   info("Checking stylesheets on HTML document");
   yield addTab(TEST_URI_HTML);
   let target = getNode("#target");
 
   let {inspector} = yield openInspector();
   yield selectNode("#target", inspector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js
@@ -140,31 +140,34 @@ const TEST_DATA = [
     test: fragment => {
       is(countAll(fragment), 1);
       is(countUrls(fragment), 1);
       is(getUrl(fragment), "http://somesite.com/path/to/binding.xml#someid");
     }
   },
   {
     name: "background",
-    value: "linear-gradient(to right, rgba(183,222,237,1) 0%, rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, #F06 75%, red 100%)",
+    value: "linear-gradient(to right, rgba(183,222,237,1) 0%, " +
+           "rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, " +
+           "#F06 75%, red 100%)",
     test: fragment => {
       is(countAll(fragment), 10);
       let allSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
       is(allSwatches.length, 5);
       is(allSwatches[0].textContent, "rgba(183,222,237,1)");
       is(allSwatches[1].textContent, "rgba(33,180,226,1)");
       is(allSwatches[2].textContent, "rgba(31,170,217,.5)");
       is(allSwatches[3].textContent, "#F06");
       is(allSwatches[4].textContent, "red");
     }
   },
   {
     name: "background",
-    value: "-moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)",
+    value: "-moz-radial-gradient(center 45deg, circle closest-side, " +
+           "orange 0%, red 100%)",
     test: fragment => {
       is(countAll(fragment), 6);
       let colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS);
       is(colorSwatches.length, 2);
       is(colorSwatches[0].textContent, "orange");
       is(colorSwatches[1].textContent, "red");
       let angleSwatches = fragment.querySelectorAll("." + ANGLE_CLASS);
       is(angleSwatches.length, 1);
@@ -202,20 +205,22 @@ const TEST_DATA = [
     test: fragment => {
       is(countAll(fragment), 3);
       is(countColors(fragment), 1);
       is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong");
     }
   },
   {
     name: "background-image",
-    value: "url(../../../look/at/this/folder/structure/../../red.blue.green.svg   )",
+    value: "url(../../../look/at/this/folder/structure/../" +
+           "../red.blue.green.svg   )",
     test: fragment => {
       is(countAll(fragment), 1);
-      is(getUrl(fragment), "../../../look/at/this/folder/structure/../../red.blue.green.svg");
+      is(getUrl(fragment), "../../../look/at/this/folder/structure/../" +
+                           "../red.blue.green.svg");
     }
   },
   {
     name: "transition-timing-function",
     value: "linear",
     test: fragment => {
       is(countCubicBeziers(fragment), 1);
       is(getCubicBezier(fragment), "linear");
@@ -285,17 +290,17 @@ const TEST_DATA = [
     name: "background",
     value: "rgb(255, var(--g-value, 0), 192)",
     test: fragment => {
       is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)");
     }
   }
 ];
 
-add_task(function*() {
+add_task(function* () {
   let parser = new OutputParser(document);
   for (let i = 0; i < TEST_DATA.length; i++) {
     let data = TEST_DATA[i];
     info("Output-parser test data " + i + ". {" + data.name + " : " +
       data.value + ";}");
     data.test(parser.parseCssProperty(data.name, data.value, {
       colorClass: COLOR_CLASS,
       urlClass: URL_CLASS,
--- a/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_refresh_when_active.js
@@ -6,17 +6,17 @@
 
 // Test that the style-inspector views only refresh when they are active.
 
 const TEST_URI = `
   <div id="one" style="color:red;">one</div>
   <div id="two" style="color:blue;">two</div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   yield selectNode("#one", inspector);
 
   is(getRuleViewPropertyValue(view, "element", "color"), "red",
     "The rule-view shows the properties for test node one");
 
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-background-image.js
@@ -20,17 +20,17 @@ const TEST_URI = `
       color: #333;
       background: url(chrome://global/skin/icons/warning-64.png) no-repeat left center;
       padding-left: 70px;
     }
   </style>
   <div class="test-element">test element</div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   info("Testing the background-image property on the body rule");
   yield testBodyRuleView(view);
 
   info("Selecting the test div node");
   yield selectNode(".test-element", inspector);
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-closes-on-new-selection.js
@@ -3,17 +3,17 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that if a tooltip is visible when a new selection is made, it closes
 
 const TEST_URI = "<div class='one'>el 1</div><div class='two'>el 2</div>";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode(".one", inspector);
 
   info("Testing rule view tooltip closes on new selection");
   yield testRuleView(view, inspector);
 
   info("Testing computed view tooltip closes on new selection");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -12,17 +12,17 @@ const TEST_URI = `
       font-family: cursive;
       color: #333;
       padding-left: 70px;
     }
   </style>
   <div id="testElement">test element</div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testElement", inspector);
   yield testRuleView(view, inspector.selection.nodeFront);
 
   info("Opening the computed view");
   let onComputedViewReady = inspector.once("computed-view-refreshed");
   view = selectComputedView(inspector);
@@ -104,17 +104,17 @@ function* testExpandedComputedViewProper
 
   let dataURL = yield getFontFamilyDataURL(valueSpan.textContent, nodeFront);
   is(images[0].getAttribute("src"), dataURL,
     "Tooltip contains the correct data-uri image");
 }
 
 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/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-shorthand-fontfamily.js
@@ -10,17 +10,17 @@ const TEST_URI = `
   <style type="text/css">
     #testElement {
       font: italic bold .8em/1.2 Arial;
     }
   </style>
   <div id="testElement">test element</div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   yield selectNode("#testElement", inspector);
   yield testRuleView(view, inspector.selection.nodeFront);
 });
 
 function* testRuleView(ruleView, nodeFront) {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-size.js
@@ -12,17 +12,17 @@ const TEST_URI = `
     div {
       width: 300px;height: 300px;border-radius: 50%;
       background: red url(chrome://global/skin/icons/warning-64.png);
     }
   </style>
   <div></div>
 `;
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
   yield testImageDimension(view);
   yield testPickerDimension(view);
 });
 
 function* testImageDimension(ruleView) {
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-01.js
@@ -12,17 +12,17 @@ const TEST_URI = `
       transform: skew(16deg);
     }
   </style>
   Test the css transform highlighter
 `;
 
 const TYPE = "CssTransformHighlighter";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   let overlay = view.highlighters;
 
   ok(!overlay.highlighters[TYPE], "No highlighter exists in the rule-view");
   let h = yield overlay._getHighlighter(TYPE);
   ok(overlay.highlighters[TYPE],
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-02.js
@@ -14,17 +14,17 @@ const TEST_URI = `
       color: yellow;
     }
   </style>
   Test the css transform highlighter
 `;
 
 var TYPE = "CssTransformHighlighter";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   let hs = view.highlighters;
 
   ok(!hs.highlighters[TYPE], "No highlighter exists in the rule-view (1)");
 
   info("Faking a mousemove on a non-transform property");
   let {valueSpan} = getRuleViewProperty(view, "body", "color");
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-03.js
@@ -20,37 +20,37 @@ const TEST_URI = `
       color: purple;
     }
   </style>
   Test the css transform highlighter
 `;
 
 const TYPE = "CssTransformHighlighter";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   // Mock the highlighter front to get the reference of the NodeFront
   let HighlighterFront = {
     isShown: false,
     nodeFront: null,
     nbOfTimesShown: 0,
-    show: function(nodeFront) {
+    show: function (nodeFront) {
       this.nodeFront = nodeFront;
       this.isShown = true;
       this.nbOfTimesShown ++;
       return promise.resolve(true);
     },
-    hide: function() {
+    hide: function () {
       this.nodeFront = null;
       this.isShown = false;
       return promise.resolve();
     },
-    finalize: function() {}
+    finalize: function () {}
   };
 
   // Inject the mock highlighter in the rule-view
   let hs = view.highlighters;
   hs.highlighters[TYPE] = HighlighterFront;
 
   let {valueSpan} = getRuleViewProperty(view, "body", "transform");
 
--- a/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_transform-highlighter-04.js
@@ -22,17 +22,17 @@ const TEST_URI = `
       transform: skew(25deg);
     }
   </style>
   <div class="test"></div>
 `;
 
 const TYPE = "CssTransformHighlighter";
 
-add_task(function*() {
+add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode(".test", inspector);
 
   let hs = view.highlighters;
 
   info("Faking a mousemove on the overriden property");
   let {valueSpan} = getRuleViewProperty(view, "div", "transform");
--- a/devtools/client/inspector/shared/test/doc_author-sheet.html
+++ b/devtools/client/inspector/shared/test/doc_author-sheet.html
@@ -1,37 +1,33 @@
 <!-- Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/ -->
 <html>
 <head>
   <title>authored sheet test</title>
-
   <style>
     #target {
       color: chartreuse;
     }
   </style>
-
   <script>
-var gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
-  .getService(SpecialPowers.Ci.nsIIOService)
+    "use strict";
+    var gIOService = SpecialPowers.Cc["@mozilla.org/network/io-service;1"]
+                                  .getService(SpecialPowers.Ci.nsIIOService);
 
-var style = "data:text/css,div { background-color: seagreen; }";
-var uri = gIOService.newURI(style, null, null);
-var windowUtils = SpecialPowers.wrap(window)
-    .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
-    .getInterface(SpecialPowers.Ci.nsIDOMWindowUtils);
-windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
-
+    var style = "data:text/css,div { background-color: seagreen; }";
+    var uri = gIOService.newURI(style, null, null);
+    var windowUtils = SpecialPowers.wrap(window)
+                      .QueryInterface(SpecialPowers.Ci.nsIInterfaceRequestor)
+                      .getInterface(SpecialPowers.Ci.nsIDOMWindowUtils);
+    windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
   </script>
-
 </head>
 <body>
   <div id="target"> the ocean </div>
-
   <input type=text placeholder=test></input>
   <input type=color></input>
   <input type=range></input>
   <input type=number></input>
   <progress></progress>
   <blockquote type=cite>
     <pre _moz_quote=true>
       inspect <a href="foo">user agent</a> styles
--- a/devtools/client/inspector/shared/test/doc_content_stylesheet.html
+++ b/devtools/client/inspector/shared/test/doc_content_stylesheet.html
@@ -1,25 +1,24 @@
 <html>
 <head>
   <title>test</title>
-
   <link href="./doc_content_stylesheet_linked.css" rel="stylesheet" type="text/css">
-
   <script>
+    /* exported loadCSS */
+    "use strict";
     // Load script.css
     function loadCSS() {
-      var link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.type = 'text/css';
+      let link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.type = "text/css";
       link.href = "./doc_content_stylesheet_script.css";
-      document.getElementsByTagName('head')[0].appendChild(link);
+      document.getElementsByTagName("head")[0].appendChild(link);
     }
   </script>
-
   <style>
     table {
       border: 1px solid #000;
     }
   </style>
 </head>
 <body onload="loadCSS();">
   <table id="target">
--- a/devtools/client/inspector/shared/test/doc_frame_script.js
+++ b/devtools/client/inspector/shared/test/doc_frame_script.js
@@ -1,41 +1,42 @@
 /* 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/ */
+/* globals addMessageListener, sendAsyncMessage */
 
 "use strict";
 
 // A helper frame-script for brower/devtools/styleinspector tests.
 //
 // Most listeners in the script expect "Test:"-namespaced messages from chrome,
 // then execute code upon receiving, and immediately send back a message.
 // This is so that chrome test code can execute code in content and wait for a
 // response this way:
-// let response = yield executeInContent(browser, "Test:MessageName", data, true);
-// The response message should have the same name "Test:MessageName"
+// let response = yield executeInContent(browser, "Test:MsgName", data, true);
+// The response message should have the same name "Test:MsgName"
 //
 // Some listeners do not send a response message back.
 
-var {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
+var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
 
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 var {CssLogic} = require("devtools/shared/inspector/css-logic");
 var promise = require("promise");
 
 /**
  * Get a value for a given property name in a css rule in a stylesheet, given
  * their indexes
  * @param {Object} data Expects a data object with the following properties
  * - {Number} styleSheetIndex
  * - {Number} ruleIndex
  * - {String} name
  * @return {String} The value, if found, null otherwise
  */
-addMessageListener("Test:GetRulePropertyValue", function(msg) {
+addMessageListener("Test:GetRulePropertyValue", function (msg) {
   let {name, styleSheetIndex, ruleIndex} = msg.data;
   let value = null;
 
   dumpn("Getting the value for property name " + name + " in sheet " +
     styleSheetIndex + " and rule " + ruleIndex);
 
   let sheet = content.document.styleSheets[styleSheetIndex];
   if (sheet) {
@@ -50,17 +51,17 @@ addMessageListener("Test:GetRuleProperty
 
 /**
  * Get information about all the stylesheets that contain rules that apply to
  * a given node. The information contains the sheet href and whether or not the
  * sheet is a content sheet or not
  * @param {Object} objects Expects a 'target' CPOW object
  * @return {Array} A list of stylesheet info objects
  */
-addMessageListener("Test:GetStyleSheetsInfoForNode", function(msg) {
+addMessageListener("Test:GetStyleSheetsInfoForNode", function (msg) {
   let target = msg.objects.target;
   let sheets = [];
 
   let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
     .getService(Ci.inIDOMUtils);
   let domRules = domUtils.getCSSStyleRules(target);
 
   for (let i = 0, n = domRules.Count(); i < n; i++) {
@@ -77,65 +78,66 @@ addMessageListener("Test:GetStyleSheetsI
 /**
  * Get the property value from the computed style for an element.
  * @param {Object} data Expects a data object with the following properties
  * - {String} selector: The selector used to obtain the element.
  * - {String} pseudo: pseudo id to query, or null.
  * - {String} name: name of the property
  * @return {String} The value, if found, null otherwise
  */
-addMessageListener("Test:GetComputedStylePropertyValue", function(msg) {
+addMessageListener("Test:GetComputedStylePropertyValue", function (msg) {
   let {selector, pseudo, name} = msg.data;
-  let element = content.document.querySelector(selector);
-  let value = content.document.defaultView.getComputedStyle(element, pseudo).getPropertyValue(name);
+  let doc = content.document;
+
+  let element = doc.querySelector(selector);
+  let value = content.getComputedStyle(element, pseudo).getPropertyValue(name);
   sendAsyncMessage("Test:GetComputedStylePropertyValue", value);
 });
 
 /**
  * Wait the property value from the computed style for an element and
  * compare it with the expected value
  * @param {Object} data Expects a data object with the following properties
  * - {String} selector: The selector used to obtain the element.
  * - {String} pseudo: pseudo id to query, or null.
  * - {String} name: name of the property
  * - {String} expected: the expected value for property
  */
-addMessageListener("Test:WaitForComputedStylePropertyValue", function(msg) {
+addMessageListener("Test:WaitForComputedStylePropertyValue", function (msg) {
   let {selector, pseudo, name, expected} = msg.data;
   let element = content.document.querySelector(selector);
   waitForSuccess(() => {
     let value = content.document.defaultView.getComputedStyle(element, pseudo)
                                             .getPropertyValue(name);
 
     return value === expected;
   }).then(() => {
     sendAsyncMessage("Test:WaitForComputedStylePropertyValue");
-  })
+  });
 });
 
-
 var dumpn = msg => dump(msg + "\n");
 
 /**
  * Polls a given function waiting for it to return true.
  *
  * @param {Function} validatorFn A validator function that returns a boolean.
  * This is called every few milliseconds to check if the result is true. When
  * it is true, the promise resolves.
  * @param {String} name Optional name of the test. This is used to generate
  * the success and failure messages.
  * @return a promise that resolves when the function returned true or rejects
  * if the timeout is reached
  */
-function waitForSuccess(validatorFn, name="untitled") {
+function waitForSuccess(validatorFn, name = "untitled") {
   let def = promise.defer();
 
-  function wait(validatorFn) {
-    if (validatorFn()) {
+  function wait(fn) {
+    if (fn()) {
       def.resolve();
     } else {
-      setTimeout(() => wait(validatorFn), 200);
+      setTimeout(() => wait(fn), 200);
     }
   }
   wait(validatorFn);
 
   return def.promise;
 }
--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -1,11 +1,12 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-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);
@@ -72,17 +73,17 @@ registerCleanupFunction(() => {
 /**
  * The rule-view tests rely on a frame-script to be injected in the content test
  * page. So override the shared-head's addTab to load the frame script after the
  * tab was added.
  * FIXME: Refactor the rule-view tests to use the testActor instead of a frame
  * script, so they can run on remote targets too.
  */
 var _addTab = addTab;
-addTab = function(url) {
+addTab = function (url) {
   return _addTab(url).then(tab => {
     info("Loading the helper frame script " + FRAME_SCRIPT_URL);
     let browser = tab.linkedBrowser;
     browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
     return tab;
   });
 };
 
@@ -120,17 +121,18 @@ function waitForContentMessage(name) {
  * @param {Object} objects
  *        Optional CPOW objects to send along
  * @param {Boolean} expectResponse
  *        If set to false, don't wait for a response with the same name
  *        from the content script. Defaults to true.
  * @return {Promise} Resolves to the response data if a response is expected,
  * immediately resolves otherwise
  */
-function executeInContent(name, data={}, objects={}, expectResponse=true) {
+function executeInContent(name, data = {}, objects = {},
+                          expectResponse = true) {
   info("Sending message " + name + " to content");
   let mm = gBrowser.selectedBrowser.messageManager;
 
   mm.sendAsyncMessage(name, data, objects);
   if (expectResponse) {
     return waitForContentMessage(name);
   }
 
@@ -179,18 +181,18 @@ function* waitForComputedStyleProperty(s
 }
 
 /**
  * Given an inplace editable element, click to switch it to edit mode, wait for
  * focus
  *
  * @return a promise that resolves to the inplace-editor element when ready
  */
-var focusEditableField = Task.async(function*(ruleView, editable, xOffset=1,
-    yOffset=1, options={}) {
+var focusEditableField = Task.async(function* (ruleView, editable, xOffset = 1,
+                                               yOffset = 1, options = {}) {
   let onFocus = once(editable.parentNode, "focus", true);
   info("Clicking on editable field to turn to edit mode");
   EventUtils.synthesizeMouse(editable, xOffset, yOffset, options,
     editable.ownerDocument.defaultView);
   yield onFocus;
 
   info("Editable field gained focus, returning the input field now");
   let onEdit = inplaceEditor(editable.ownerDocument.activeElement);
@@ -206,17 +208,17 @@ var focusEditableField = Task.async(func
  *        This is called every few milliseconds to check if the result is true.
  *        When it is true, the promise resolves.
  * @param {String} name
  *        Optional name of the test. This is used to generate
  *        the success and failure messages.
  * @return a promise that resolves when the function returned true or rejects
  * if the timeout is reached
  */
-function waitForSuccess(validatorFn, name="untitled") {
+function waitForSuccess(validatorFn, name = "untitled") {
   let def = promise.defer();
 
   function wait(validator) {
     if (validator()) {
       ok(true, "Validator function " + name + " returned true");
       def.resolve();
     } else {
       setTimeout(() => wait(validator), 200);
@@ -231,17 +233,17 @@ function waitForSuccess(validatorFn, nam
  * Get the dataURL for the font family tooltip.
  *
  * @param {String} font
  *        The font family value.
  * @param {object} nodeFront
  *        The NodeActor that will used to retrieve the dataURL for the
  *        font family tooltip contents.
  */
-var getFontFamilyDataURL = Task.async(function*(font, nodeFront) {
+var getFontFamilyDataURL = Task.async(function* (font, nodeFront) {
   let fillStyle = (Services.prefs.getCharPref("devtools.theme") === "light") ?
       "black" : "white";
 
   let {data} = yield nodeFront.getFontFamilyDataURL(font, fillStyle);
   let dataURL = yield data.string();
   return dataURL;
 });
 
@@ -367,17 +369,17 @@ function getRuleViewSelectorHighlighterI
  * @param {Object} expectedChange
  *        Optional object that needs the following props:
  *          - {DOMNode} element The element in the page that will have its
  *            style changed.
  *          - {String} name The style name that will be changed
  *          - {String} value The expected style value
  * The style will be checked like so: getComputedStyle(element)[name] === value
  */
-var simulateColorPickerChange = Task.async(function*(ruleView, colorPicker,
+var simulateColorPickerChange = Task.async(function* (ruleView, colorPicker,
     newRgba, expectedChange) {
   let onRuleViewChanged = ruleView.once("ruleview-changed");
   info("Getting the spectrum colorpicker object");
   let spectrum = yield colorPicker.spectrum;
   info("Setting the new color");
   spectrum.rgb = newRgba;
   info("Applying the change");
   spectrum.updateUI();
@@ -442,17 +444,17 @@ function getRuleViewRuleEditor(view, chi
 /**
  * Click on a rule-view's close brace to focus a new property name editor
  *
  * @param {RuleEditor} ruleEditor
  *        An instance of RuleEditor that will receive the new property
  * @return a promise that resolves to the newly created editor when ready and
  * focused
  */
-var focusNewRuleViewProperty = Task.async(function*(ruleEditor) {
+var focusNewRuleViewProperty = Task.async(function* (ruleEditor) {
   info("Clicking on a close ruleEditor brace to start editing a new property");
   ruleEditor.closeBrace.scrollIntoView();
   let editor = yield focusEditableField(ruleEditor.ruleView,
     ruleEditor.closeBrace);
 
   is(inplaceEditor(ruleEditor.newPropSpan), editor,
     "Focused editor is the new property editor.");
 
@@ -467,17 +469,17 @@ var focusNewRuleViewProperty = Task.asyn
  *
  * @param {RuleEditor} ruleEditor
  *        The instance of RuleEditor that will receive the new property(ies)
  * @param {String} inputValue
  *        The text to be entered in the new property name field
  * @return a promise that resolves when the new property name has been entered
  * and once the value field is focused
  */
-var createNewRuleViewProperty = Task.async(function*(ruleEditor, inputValue) {
+var createNewRuleViewProperty = Task.async(function* (ruleEditor, inputValue) {
   info("Creating a new property editor");
   let editor = yield focusNewRuleViewProperty(ruleEditor);
 
   info("Entering the value " + inputValue);
   editor.input.value = inputValue;
 
   info("Submitting the new value and waiting for value field focus");
   let onFocus = once(ruleEditor.element, "focus", true);
@@ -491,17 +493,17 @@ var createNewRuleViewProperty = Task.asy
  *
  * @param {CssRuleView} view
  *        The instance of the rule-view panel
  * @param {String} searchValue
  *        The filter search value
  * @return a promise that resolves when the rule-view is filtered for the
  * search term
  */
-var setSearchFilter = Task.async(function*(view, searchValue) {
+var setSearchFilter = Task.async(function* (view, searchValue) {
   info("Setting filter text to \"" + searchValue + "\"");
   let win = view.styleWindow;
   let searchField = view.searchField;
   searchField.focus();
   synthesizeKeys(searchValue, win);
   yield view.inspector.once("ruleview-filtered");
 });